html - 如何将此图像及其文本居中

Question

我的问题是我无法将这张图片居中。我试过 margin: 0 和 absolute positions 但似乎没有任何效果。在 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

你可以试试看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 position relative 到这个标签而不是 .container