Question

我试图将h3标题置于图像中间并且无法正确对齐。我在一行中有3个图像 - 每个图像/标题四列。以下是它应该看起来的样子 -

到目前为止，我将图像置于中心但需要将标题放在每个图像中 -

我不确定是否需要设置每个标题/图像的样式，或者是否有办法在一个类/ ID下执行此操作？

我还没有设置文本的样式（需要更小和更白），图像是故意不同的。

这是我现在的代码 -

HTML

<div class="row"> 
                <div class="four columns"> 
                    <div id="video">      
                        <h3>VIDEO</h3>
                        <img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
                    </div>
                </div>
                <div class="four columns"> 
                    <div id="blog">   
                        <h3>BLOG</h3>
                        <img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
                    </div>    
                </div>
                <div class="four columns"> 
                    <div id="faq"> 
                        <h3>FAQ</h3>
                        <img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
                    </div>    
                </div>
            </div>

我已尝试过几个不同的位置相对/绝对变化但是还没有能够做到正确。我使用这个css集中了图像 -

CSS

section#welcome img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

该部分有两行，上面一行有文字。我没有把代码包括在内，因为它没有认为是相关的。

任何帮助都将不胜感激。

Answer 1

＆＃13;

.four {
  position: relative;
  display: inline-block;
}

.four h3 {
  position: absolute;
  color: #FFF;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<div class="row">
  <div class="four columns">
    <div id="video">
      <h3>VIDEO</h3>
      <img src="https://static.pexels.com/photos/410986/pexels-photo-410986.jpeg" alt="Video" style="width:300px;height:150px;">
    </div>
  </div>
  <div class="four columns">
    <div id="blog">
      <h3>BLOG</h3>
      <img src="https://static.pexels.com/photos/410986/pexels-photo-410986.jpeg" alt="blog" style="width:300px;height:150px;">
    </div>
  </div>
  <div class="four columns">
    <div id="faq">
      <h3>FAQ</h3>
      <img src="https://static.pexels.com/photos/410986/pexels-photo-410986.jpeg" alt="FAQ" style="width:300px;height:150px;">
    </div>
  </div>
</div>

＆＃13;

Answer 2

#video,
#blog,
#faq {
  position: relative;
  display: inline-block;
}

h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="row">
  <div class="four columns">
    <div id="video">
      <h3>VIDEO</h3>
      <img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
    </div>
  </div>
  <div class="four columns">
    <div id="blog">
      <h3>BLOG</h3>
      <img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
    </div>
  </div>
  <div class="four columns">
    <div id="faq">
      <h3>FAQ</h3>
      <img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
    </div>
  </div>
</div>

CSS - 将图像居中放置在图像中间

2 个答案: