如何使标题与图像和文本水平居中

Question

我有一张图片和一段文字。我需要文本应该在图像之后连续。并且像[图像]时间跟踪器一样将两者并排对齐后，使两个内容水平居中作为当前页面的标题。我试图做的事情如下。

 <div class="row">
      <div class="col-80 col-offset-10">
          <div class="appheadingcenter">
            <img src="img/clock.png" alt="clock" class="clockwidth"></img>
            <div class="timesheettext2">
              <h1 class="timesheettext">
                <b>Timesheet Tracking</b>
              </h1>
            </div>
          </div>
        </div>
        </div>

Answer 1

<div class="appheadingcenter" style="margin:auto;width:454px;">
                <img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png" 
        alt="clock" class="clockwidth" style="float: left;max-width: 100px;max-height: 100px;">
                <div class="timesheettext2" style="width: 341px;float: left;">
                  <h1 class="timesheettext">
                    <b>Timesheet Tracking</b>
                  </h1>
                </div>
    </div>
	

更新的答案

如果您不想修复宽度，请使用以下解决方案

<div class="appheadingcenter" style="text-align:center;">
      <div style="display: inline-block;">
                <img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png" 
        alt="clock" class="clockwidth" style="float: left;max-width: 100px;max-height: 100px;">
                <div class="timesheettext2" style="width: 341px;float: left;">
                  <h1 class="timesheettext">
                    <b>Timesheet Tracking</b>
                  </h1>
                </div>
              </div>
    </div>

Answer 2

这是一种使用display: flex;的技术

注意：单击整页以查看此演示的大图

。

	.header-frame {
		display: flex;
		align-items: center;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
	}
	.image-frame {
		display: inline-block;
		background: url("https://bobagaming.files.wordpress.com/2015/10/league-of-legends-world-championship-logo-eps-vector-image.png") no-repeat center;
		width: calc(4vw + 4vh);
		height: calc(4vw + 4vh);
		background-size: cover;
	}
	.text-frame {
		font-family: 'Arial';
		font-size: calc(2.5vw + 2.5vh);
		display: inline-block;
		margin: 1vh 1vw;
	}

<div class="header-frame">
	<span class="image-frame"></span>
	<h3 class="text-frame">World Championships</h3>
</div>

Answer 3

只需给出以下 css。 display:flex将使图像和文本并排放置，justify-content: center;将使其水平居中。

.appheadingcenter {
    display: flex;
    justify-content: center;
}