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

Question

我正在尝试将三张图片放在我页面的中央。该页面由页面左侧的固定菜单和 div 组成，我想在其中显示三张照片（稍后会显示更多照片），我的 float: left 属性 =15=] 但是水平居中，我的意思是照片的左边和右边必须一样space。 我希望它能够响应。

这就是我想要的：

┌───────────────────────────────────────────────────────────┐
|    HEADER(The white space without anything by the moment) |
├──────────┬────────────────────────────────────────────────┤ 
|          |               DIV CONTAINER                    |
|          |                                                |
|          |                                                |
|          |    [SPACE]      THE IMAGES        [SPACE]      |
|   MENU   |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
└──────────┴────────────────────────────────────────────────┘

两个 space 必须相等。

我在 CSS 上尝试了很多更改来获得该行为，但我无法获得。我也参考了这个问题的答案： Align image in center and middle within div 但仍然不起作用。

这是我的实际代码：

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

提前致谢！

Answer 1

我建议使用 bootstrap 或基础 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。

基础5：

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

你也可以使用块网格，它是为像你这样的麻烦而制作的:)。

Answer 2

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

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

的图像上添加负边距

希望这对您有所帮助。

Answer 3

1.Firstly改变#container的宽度：

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

2.And 之后移除图像的浮动。它们是 display: 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>

看看这个例子：

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

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

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

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

How can I center an image horizontally with float property?

html

css

css-float

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

How can I center an image horizontally with float property?

html

css

css-float

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