如何居中此图像及其文本

Question

我的问题是我无法将这张图片居中。我试过 margin: 0 和绝对位置，但似乎没有任何效果。在 html 和 css 方面，我是个菜鸟。我已经清除了将其从 html 和 css 居中的尝试。

即使站点窗口宽度发生变化，我也希望图像居中，因此填充不起作用。

这是我的 CSS

/* image and text setup container */
.container {
float: left;
position: relative;
width: 100%;
left: 0%;
right: 0%;
}

.imagetext {
text-align: left;
width: 5%;
position: absolute;
top: 8px;
right: 60px;
font-size: 18px;
}

img { 
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}

HTML

<!--Front page image and text-->
    <div class="container">
        <img src="Aberlady_Church.png" alt="Church" width="400" height="200">
        <div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat
    </div>
</div>

目前，图片如下所示：http://puu.sh/o706W/ed57f22e12.jpg

Answer 1

你实际上只需要应用一个“display:block;” +“保证金：0自动；”到你的形象。

/* image and text setup container */
.container {
  float: left;
  position: relative;
  width: 100%;
  left: 0%;
  right: 0%;
}

.imagetext {
  text-align: left;
  width: 5%;
  position: absolute;
  top: 8px;
  right: 60px;
  font-size: 18px;
}

img { 
  /* add this to make it center */
     display:block;
     margin:0 auto;
  /* add this to make it center */
  padding-right: 5px;
  padding-right: 5px;
  padding-bottom: 15px;
  
}

<div class="container">
  <img src="Aberlady_Church.png" alt="Church" width="400" height="200">
  <div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat
</div>

Answer 2

您可能需要考虑将您的图片及其相关文本封装在 <div> 中，以将其与页面文本的其余部分分开。这也将允许您将两个元素居中，而不管页面宽度如何。这是一个例子：

https://jsfiddle.net/Bendrick92/gyc2n5o5/

.container {
  float: left;
  position: relative;
  width: 100%;
  left: 0%;
  right: 0%;
}
  .imagecontainer {
    width: 75%;
    height: auto;
    margin: 0 auto;
    position: relative;
  }
    .imagecontainer img {
      width: 100%;
      height: auto;
      padding-right: 5px;
      padding-right: 5px;
      padding-bottom: 15px;
    }
    .imagecontainer .imagetext {
      width: 20%;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
    }

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
  <div class="imagecontainer">
    <img src="http://www.topsailunitedchurch.nf.net/images/Church2.jpg" alt="Church" />
    <div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat</div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
</div>

或者，如果您希望图像文本位于图像下方的中心：

https://jsfiddle.net/Bendrick92/gyc2n5o5/1/

.container {
  float: left;
  position: relative;
  width: 100%;
  left: 0%;
  right: 0%;
}
  .imagecontainer {
    width: 75%;
    height: auto;
    margin: 0 auto;
    position: relative;
  }
    .imagecontainer img {
      width: 100%;
      height: auto;
      padding-right: 5px;
      padding-right: 5px;
      padding-bottom: 15px;
    }
    .imagecontainer .imagetext {
      width: 100%;
      height: 100%;
      position: relative;
      text-align: center;
    }

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
  <div class="imagecontainer">
    <img src="http://www.topsailunitedchurch.nf.net/images/Church2.jpg" alt="Church" />
    <div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat</div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
</div>

Answer 3

你有很多错误和多余的代码。建议你阅读一些关于 HTML、CSS 的书籍来提升你的水平。

这是一个用最少的代码简单地解决您的问题的示例。我们添加了图像包装器.image_wrapper，将图像和文本居中放置在其中。

CSS

.image_wrapper {
    text-align: center;
}

.imagetext {
    font-size: 18px;
}

img { 
    padding: 5px;
}

HTML

<div class="container">
  <div class="image_wrapper">
    <img src="http://www.theimaginativeconservative.org/wp-content/uploads/2016/02/Pretty-Church.jpg" alt="Church" width="400" height="200" />
    <div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat</div>
  </div>
</div>

检查一下。

https://jsfiddle.net/r1rh7wn4/

Answer 4

我会为该标记尝试以下样式。

.container {
    width: 100%;
}

.imagetext {
    width: 5%;
    font-size: 18px;
    margin:0;
}

img { 
    margin:0;
    padding-right: 5px;
    padding-right: 5px;
    padding-bottom: 15px;
}

Answer 5

一般来说，你正在寻找

margin-left: auto;
margin-right: auto;

在其容器内水平居中块级元素。

但请注意，通过在其包含块中添加浮动和位置会使事情复杂化，因此请尽量避免使用它们，除非你真的需要它们。

Answer 6

你可以试试like this

<!--Front page image and text-->
    <div class="container">
      <figure>
        <img src="http://lorempicsum.com/futurama/350/200/1" alt="Church" width="400" height="200">
        <div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat
        </div>
      </figure>
    </div>

CSS

/* image and text setup container */
.container {
position: relative;
width: 100%;
}

.imagetext {
text-align: left;
width: 5%;
position: absolute;
top: 8px;
color: #fff;
right: 80px;
font-size: 18px;
}
figure { position: relative; width: 400px; margin: auto; /* the width of your image */}
img { 
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}

我添加了一个figure 并将文本定位在absolute 位置relative 到这个标签而不是.container