Question

我有一张图片和一张文字。我需要文本应该在连续的图像之后。并且像[image]时间跟踪器一样并排对齐后，将两个内容水平放置在屏幕的中心，作为当前页面的标题。我试图做的是下面的。

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

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

3 个答案: