Question

我想在我的页面上居中三个图像。该页面位于页面左侧的固定菜单和div，其中我想在float: left CSS上显示三张照片（稍后会有更多照片）┌───────────────────────────────────────────────────────────┐ | HEADER(The white space without anything by the moment) | ├──────────┬────────────────────────────────────────────────┤ | | DIV CONTAINER | | | | | | | | | [SPACE] THE IMAGES [SPACE] | | MENU | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | └──────────┴────────────────────────────────────────────────┘属性但水平居中，我的意思是在照片的左侧和右侧必须是相同的空间。 我希望它能够做出回应。

这就是我想要的：

CSS

两个空格必须相等。

我在<!DOCTYPE HTML> <HTML> <HEAD> <TITLE>Title</TITLE> <style type = "text/css"> body{ margin: 0; } #menu{ background-color: orange; position: fixed; text-align: center; left: 0px; top: 0px; width: 120px; height: 100%; margin-top: 150px; } #container{ position: absolute; left: 120px; top: 150px; width: 100%; height: 100%; text-align: center; } img.centeredImages{ display: inline-block; width: 350px; height: 200px; float: left; margin: auto; } #image1{ margin: 20px 20px; } #image2{ margin: 20px 10px; } #image3{ margin: 20px 8px; } </style> </HEAD> <BODY> <div id = "menu"> <span class = "spanMenu"> HOME </span> <span class = "spanMenu"> LOGS </span> <span class = "spanMenu"> QUESTIONS </span> </div> <div id = "container"> <img class = "centeredImages" id = "image1" src = "https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg"> <img class = "centeredImages" id = "image2" src = "http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg"> <img class = "centeredImages" id = "image3" src = "http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png"> </div> </BODY> </HTML>上尝试了很多更改以获得该行为，但我无法得到它。我也将这个问题的答案作为参考：Align image in center and middle within div但仍然不起作用。

这是我的实际代码：

$query = mysql_query("SELECT * FROM $tableName");
$num = mysql_num_rows($query);
if($num > 0)
{
    echo "Total records = ".$num;
}
else
{
    echo "Sorry no record found";
}

提前致谢！

Answer 1

我建议使用bootstrap或foundation 5。在bootstrap中：

<div class="row">
 <div class="col-md-3"><img src=""></div>
 <div class="col-md-3"><img src=""></div>
 <div class="col-md-3"><img src=""></div>
 <div class="col-md-3"><img src=""></div>
</div>

如果需要，可以稍后添加xs，lg，xl。

在foundation5：

<div class="row">
 <div class="medium-3 columns offset-1"><img src=""></div>
 .
 .
 .
</div>

你也可以使用像你这样的麻烦的块网格：）。

Answer 2

通过向所有图像添加display: inline-block，然后将text-align: center添加到容器元素，图像将占用相同的空间并水平居中。

但是，由于您希望每个图像水平居中但在新行上，我会将display:block添加到图像中，同时添加position:relative和left: 50%。最后，我会在图像上添加一个负边距，看起来像margin-left: -[insert half of your image width]。

希望这有帮助。

Answer 3

1.首先更改#container：

的宽度

#container { 
    width: calc(100% - 120px); 
}

2.然后将浮动移除到图像。它们显示：inline-block所以它们将在一行上：

img.centeredImages {
    float: none;
}

我希望这会对你有所帮助。

Answer 4

您可以通过将每个图像包装在容器中轻松实现这一目标：

.image-wrapper{
    width: 100%;
    float: left;
}

.image-wrapper img{
    width: 100%;
    max-width: 350px;
    max-height: 200px;
    margin-bottom: 20px;
}

<div class="image-wrapper">
    <image ... />
</div>

看一下这个例子：

＆＃13;

body {
  margin: 0;
}
#menu {
  background-color: orange;
  position: fixed;
  text-align: center;
  left: 0px;
  top: 0px;
  width: 120px;
  height: 100%;
  margin-top: 150px;
}
#container {
  position: absolute;
  top: 150px;
  left: 120px;
  text-align: center;
}
.image-wrapper img {
  width: 100%;
  max-width: 350px;
  max-height: 200px;
  margin-bottom: 20px;
}
.image-wrapper:last-child img {
  margin-bottom: 8px;
}
.image-wrapper {
  width: 100%;
  float: left;
}

＆＃13;

<div id="menu">
  <span class="spanMenu"> HOME </span> 
  <span class="spanMenu"> LOGS </span>
  <span class="spanMenu"> QUESTIONS </span>
</div>

<div id="container">
  <div class="image-wrapper">
    <img src="https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
  </div>
  <div class="image-wrapper">
    <img src="http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
  </div>
  <div class="image-wrapper">
    <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
  </div>
  <div class="image-wrapper">
    <img src="https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
  </div>
  <div class="image-wrapper">
    <img src="http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
  </div>
  <div class="image-wrapper">
    <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
  </div>
  <div class="image-wrapper">
    <img src="https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
  </div>
  <div class="image-wrapper">
    <img src="http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
  </div>
  <div class="image-wrapper">
    <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
  </div>
</div>

＆＃13;

要在同一行上对齐更多图像，请更改.image-wrapper的宽度，并查看CSS media queries，以便在不同的设备和屏幕尺寸上获得更好的响应结果。

如何使用float属性水平居中图像？

4 个答案: