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

Question

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

3

我有一张图片和一段文字。我需要文字跟随在图片后面并排显示。并且对其两者，就像[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>

- vishnuprasad kv

我建议你创建一个JSFiddle或类似的东西，在那里你可以轻松地玩弄CSS，以实现你想要的效果。 - Synoon

3个回答

1

只需添加以下CSS代码：display:flex 可以使图像和文本并排显示，justify-content: center; 可以使其水平居中。

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

- ketan

请添加一些解释。您的答案当前被标记为“低质量”，可能最终会被删除。 - Johannes Jander

我想了解更多关于Flex概念的内容。在Flex概念中，如何使特定的div垂直居中？ - vishnuprasad kv

@Visprasad align-items: center; 可以实现此功能。更多细节请参考 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 和 https://developer.mozilla.org/en/docs/Web/CSS/flex，您可以在这里进行测试 https://jsfiddle.net/k5d8qnb0/。 - ketan

它在顶部，不是垂直居中。我必须将其置于屏幕中央。 - vishnuprasad kv

@Visprasad 噢，那么请使用.row { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } https://jsfiddle.net/k5d8qnb0/3/。 - ketan

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>

- Ranish Karim

我认为像设置 454 像素这样的宽度并不是一个好主意，我认为它无法在每个设备上精确居中。 - vishnuprasad kv

这背后的逻辑是什么？你怎么能确认它绝对居中？ - vishnuprasad kv

在我的解决方案中，样式text-align:center;负责将所有内容放置在中心位置。但是它不能与普通的div一起使用，所以我在其子div中添加了display:inline-block;来应用居中样式。我还在图像和文本上应用了float:left;样式，以使两者在同一行显示。 - Ranish Karim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TheQuestioner · Accepted Answer

这里介绍一种使用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>