Question

我想在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>

Answer 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>

当然，您可以根据自己的需要进行自定义。

Answer 2

您可以使用flexbox执行此操作。标题将位于图像旁边的空间中。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用bootstrap列。

＆＃13;

img {
  max-width: 300px;
  float: left;
}

h1 {
  text-align: center;
}

＆＃13;

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

＆＃13;

Answer 4

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

Part 1 of URL:<br/>
<select id="partx">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
<br/>
Part 2 of URL:<br/>
<input type="date" id="party" placeholde="Date">
<br/>
<button onClick="generateURLX();">Generate URL</button>
<br/>
URL Generated:
<span id="resultx"></span>

＆＃13;

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

＆＃13;

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

＆＃13;

我认为这会达到你所追求的效果。一些说明：

我们需要为<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>明确设置线条高度和高度，因此它将与徽标垂直对齐。如果标题包装线，这将无法正常工作。
在小屏幕上，徽标和标题重叠。你可以define another rule for smaller displays。

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

4 个答案: