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

Question

我有一张图片和一段文字。我需要文本应该连续跟随在图像之后。 并像 [image]Time tracker 一样将两者并排对齐后，使两个内容在屏幕的水平中心作为当前页面的标题。 下面给出了我尝试做的事情。

 <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;
}