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

我的问题是无法将此图像居中。我试过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

您可以尝试类似的

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

一般来说，您正在寻找

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

以使块级元件在其容器内水平居中。

不过，请注意，在其包含块中添加float和position会使问题变得复杂，所以除非您真的需要，否则请尽量避免这些操作。

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

.container {
    width: 100%;
}
.imagetext {
    width: 5%;
    font-size: 18px;
    margin:0;
}
img { 
    margin:0;
    padding-right: 5px;
    padding-right: 5px;
    padding-bottom: 15px;
}

您有很多错误和多余的代码。我建议你读一些关于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/

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

您实际上只需要将"display:block；"+"margin:0 auto；"应用于图像即可。

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

相关内容

最新更新

热门标签：