Question

我的问题是我无法将这张图片居中。我尝试过保证金：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

您可以尝试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

Answer 2

一般来说，您正在寻找

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

将块级元素水平居中于其容器中。

请注意，通过在其包含的块中添加浮点数和位置会使事情复杂化，所以尽量避免使用它们，除非你确实需要它们。

Answer 3

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

.container {
    width: 100%;
}

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

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

Answer 4

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

以下是使用最少代码简单解决问题的示例。我们添加图像包装器.image_wrapper，将图像和文本置于其中。

CSS

＆＃13;

.image_wrapper {
    text-align: center;
}

.imagetext {
    font-size: 18px;
}

img { 
    padding: 5px;
}

＆＃13;

HTML

＆＃13;

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

＆＃13;

检查一下。

https://jsfiddle.net/r1rh7wn4/

Answer 5

您可能需要考虑将图片及其相关文本包装在<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 6

你实际上只需要应用＆＃34; display：block;＆＃34; +＆＃34;保证金：0自动;＆＃34;你的形象。

＆＃13;

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

＆＃13;

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

＆＃13;

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

6 个答案: