Question

我正在尝试使用html和css创建一行，在浏览器的左侧和右侧显示两个图像，在这两个图像的中间显示文本。我试图让它们全部与嵌体水平对齐。以下是相关代码：

<div class="col" id="egg_area">
      <img id="egg_img" src="img/egg.png"></img>
    </div>
    <div class="col-6" id="introduction">
      <p>Hello! Welcome to the Bacon, Egg, and Cheese Sandwich Web    Map! The map below will allow you to search for the best deals on your favorite breakfast sandwich! Simply click a location anywhere within the 5 boroughs to reveal its nearest delis. By clicking each of the revealed markers you can view more details about each specific deli.</p>
    </div>
    </div>
    <div class="col" id="bacon_area">
      <img id="bacon_img" src="img/bacon.png"></img>
    </div>

相关CSS：

#egg_area {
position: absolute;
display: inline;
}

#egg_img {
position: relative;
width: 100px;
display: inline;
}

#intro_area {
height: 500px;
font-size: large;
display: inline;
}

#title {
text-align: center;
margin: 0 auto;
color: white;
text-decoration: underline;
width: 250px;
margin-top: 50px;

}

#introduction {
text-align: center;
margin: 0 auto;
margin-top: 55px;
width: 100px;
color: white;
margin-top: -9px;
display: inline;
}

#bacon_area {
position: absolute;
display: inline;
}

#bacon_img {
position: relative;
width: 100px;
display: inline;
}

第一个图像似乎与居中文本对齐，但第二个图像溢出到新行。我尝试过改变图像尺寸。任何帮助将不胜感激！

Answer 1

在div中包含内容并应用css display: flex以水平对齐

CSS

#egg_img {
position: relative;
width: 100px;
}

#title {
text-align: center;
margin: 0 auto;
color: white;
text-decoration: underline;
width: 250px;
margin-top: 50px;

}

#introduction {
text-align: center;
margin: 0 auto;
margin-top: 55px;
width: 100px;
color: black;
margin-top: -9px;
}


#bacon_img {
position: relative;
width: 100px;
}

HTML

<div style="display:flex">
    <div class="col" id="egg_area">
      <img id="egg_img" src="img/egg.png">
    </div>
    <div class="col-6" id="introduction">
      <p>Hello! Welcome to the Bacon, Egg, and Cheese Sandwich Web    Map! The map below will allow you to search for the best deals on your favorite breakfast sandwich! Simply click a location anywhere within the 5 boroughs to reveal its nearest delis. By clicking each of the revealed markers you can view more details about each specific deli.</p>
    </div>
    <div class="col" id="bacon_area">
      <img id="bacon_img" src="img/bacon.png"/>
    </div>
</div>

JSFIDDLE

Answer 2

您可以使用flexbox：

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

.bigCol {
  background: cyan;
  width: 60%;  
  flex-shrink: 0;

  /* Just set the size for the bigger column and set flex-shrink to 0, meaning it will never have
     a smaller width. */
     
  transition: width ease-out .5s;
}

.bigCol:hover {
  width: 20%;
}

.smallCol {
  background: red;
  /* width: 20%; */
  
  /* No width needed here, they will take the rest of the space, although you could add it anyway
     to make sure both small columns take the same width, regardless of the dimension of their
     content, which could be different. */
}

.smallCol,
.bigCol {  
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  /* This will vertically center the content of all the columns. */
}

img {
  width: 100%;
}

p {
  margin: 16px;
}

<div class="wrapper">

  <div class="smallCol">
    <img src="https://media2.giphy.com/media/x6q2SEFflggiQ/giphy.gif?response_id=592190da053fdebcd421e31e"></img>
  </div>

  <div class="bigCol">
    <p>Do you see something weird in the pictures? Hover to resize the columns!</p>
  </div>

  <div class="smallCol">
    <img src="https://media2.giphy.com/media/x6q2SEFflggiQ/giphy.gif?response_id=592190da053fdebcd421e31e"></img>
  </div>
  
</div>

Answer 3

横向对齐内容的一种简单方法是使用display: table和display: table-cell

<div class="display-table">
    <div class="col" id="egg_area">
        <img id="egg_img" src="img/egg.png">
    </div>
    <div class="col-6" id="introduction">
        <p>Hello! Welcome to the Bacon, Egg, and Cheese Sandwich Web Map! 
         The map below will allow you to search for the best
         deals on your favorite breakfast sandwich! Simply click a 
         location anywhere within the 5 boroughs to reveal its
         nearest delis. By clicking each of the revealed markers 
         you can view more details about each specific deli.</p>
    </div>
    <div class="col" id="bacon_area">
        <img id="bacon_img" src="img/bacon.png">
    </div>
</div>

CSS：

.display-table {
    display: table;
    width: 100%;
}

.display-table div {
    display: table-cell;
    vertical-align: middle;
}

请注意，为了实现此目的，您需要从display:inline css规则中删除#id，因为它们具有更高的特异性并覆盖display: table-cell。

如何让三个元素水平对齐？

3 个答案: