如何在 div 中水平对齐徽标和 h1答案

【问题标题】：How to align a logo and h1 horizontally in a div如何在 div 中水平对齐徽标和 h1
【发布时间】：2017-07-25 21:57:09
【问题描述】：

我想将 div 左端的徽标和该 div 中心的文本对齐（文本应该看起来像屏幕中心）。 div 的宽度适合屏幕。标志和文字都应该在同一行。它是如何实现的？我的开始如下。但是逐行显示两个元素。

<div >
<img id="imglogo" alt="" src="images/ logo.JPG"  style="width: 300px;height:75px"  />
<h1 align="center" id="H1">Project Name</h1>
</div>

【问题讨论】：

你考虑过把它们放在一张桌子上吗？
表格应该永远用于布局！要定位元素，您可以使用其他机制，例如 flexbox、浮动或定位。
您能否添加一张图片来展示预期的行为？另外，调整到小屏幕后应该是什么样子？

标签： html css asp.net position alignment

【解决方案1】：

就个人而言，我更喜欢桌子，因为它可以很好地放置东西并且可靠。见下文：

<table border=1 style="table-layout: fixed; width:100%">
  <tr>
    <td><img id="imglogo" alt="" src="https://placehold.it/100x35" /></td>
    <td style="text-align: center">Centered Text</td>
    <td></td>
  </tr>
</table>

当然，您可以随意定制。

【讨论】：

就像我上面评论的那样：使用表格进行布局是不好的做法！要定位元素，您可以使用其他机制，例如 flexbox、定位或浮动。
@andreas 为什么？表格是很好的定位器，有时它是您唯一的选择（电子邮件）。 Flexboxes 也做得很好，但需要更多的调整。浮点数非常糟糕，因为它们会扰乱您对结果的看法，尤其是float: right。当您认为它们最终会出现在右侧的最左侧时，第一个最终会出现在最右侧。而且定位往往很麻烦，并且在您更改分辨率时很容易搞砸

【解决方案2】：

您可以使用flexbox 完成此操作。标题将在图像旁边的空间中居中。

.wrapper {
  display: flex;
}
.wrapper>div, h1 {
  flex: 1;
}
h1 {
  text-align: center;
}

<div class="wrapper">
  <div><img src="https://placehold.it/300x75" /></div>
  <h1>Project Name</h1>
</div>

【讨论】：

"文本应该看起来像在屏幕的中心" - 这表明文本应该在中心，就好像徽标不存在一样。此外，这会导致徽标调整大小，这通常是不可取的。

【解决方案3】：

一种方法是使用absolute in relative positions：

h1 {text-align:center;position:relative;height:50px;line-height:50px;}
#imglogo {height:50px;position:absolute;left:0;}

h1 {
  text-align: center;
  position: relative;
  height: 50px;
  line-height: 50px;
  margin-bottom: 4px;
}

#imglogo {
  height: 50px;
  position: absolute;
  left: 0;
}

<div>
  <h1 id="H1">
    <img id="imglogo" alt="" src="http://lindseymiller.github.io/FEWD/Homework/acme-corp-mine/images/acme-corp.jpg" /> Project Name
  </h1>
  Some more text
</div>

我认为这达到了您所追求的效果。一些注意事项：

我们需要为<h1> 显式设置行高和高度，使其与徽标垂直对齐。如果标题换行，这将无法正常工作。
在小屏幕上，徽标和标题重叠。你可以define another rule for smaller displays。

【讨论】：

【解决方案4】：

您可以使用引导列。

img {
  max-width: 300px;
  float: left;
}

h1 {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-5">
    <img class="img-responsive" src="https://placehold.it/300x75" />
  </div>
  <div class="col-xs-7">
    <h1>Project Name</h1>
  </div>
</div>

【讨论】：