Question

我对HTML和CSS中的一些概念比较新，而这个我似乎无法理解。我正在尝试将两个浮动<p>元素对齐到居中<img>的两侧。这就是我基本上想要实现的目标。

即使窗口处于全宽，我也希望两个文本粘在居中图像的两侧。只有当我将窗口调整到他们被挤压到图像两侧的位置时，我才能使用它。

.header {
  margin-top: 85px;
  text-align: center;
}

<div class="header">
  <p style="float: left; margin-top: 115px;"><a href="#listen">listen</a></p>
  <img id="main_cover" src="img/into-me.png" width="250" height="250" draggable="false">
  <p style="float: right; margin-top: 115px;"><a href="#download">download</a></p>
</div>

感谢任何帮助，特别是因为这可能是一个愚蠢的问题。提前谢谢。

Answer 1

您可以使用Flexbox或 CSS表格 Fiddle

＆＃13;

.content {
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div class="content">
  <a href="">Listen</a>
  <img src="http://placehold.it/250x250">
  <a href="">Download</a>
</div>

＆＃13;

Answer 2

这样做......

<div class="header">
 <p><a href="#listen">listen</a></p>
 <img id="main_cover" src="img/into-me.png" width="250" height="250" draggable="false">
 <p><a href="#download">download</a></p>
</div>

你的CSS ......

.header { width: 400px; margin: 0 auto}
.header img { margin: 0 20px; float: left; }
.header p { margin: 115px 0 0; float: left;}

Answer 3

你可以给容器一个定义的宽度，这样当窗口大小改变时浮动的元素就不会浮动得更远：

.header {
  margin-top: 85px;
  text-align: center;
  width: 370px;
  margin: 0 auto;
}

https://jsfiddle.net/8sfvgvgr/

Answer 4

如何获得这个Flexbox？

header{
  display: flex;
  justify-content: space-around;
  align-items:center;
}

span{
  text-align:center
}

img{
  margin-left: 10px;
  margin-right: 10px;
  width: 250px;

}

<header>
  <span>Text</span>
  <img src="https://pixabay.com/static/uploads/photo/2014/07/27/20/29/landscape-403165_960_720.jpg" alt="Landascape">
  <span>Text</span>
</header>

Answer 5

您可以使用Flex执行此操作。

    <!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
}

.flex-item {
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">listen</div>
  <div class="flex-item">Image </div>
  <div class="flex-item">Download</div>  
</div>

</body>
</html>

将浮动文本水平对齐到居中的img的两侧

5 个答案: