Question

我正在努力使用HTML和CSS将图像放在网页上。

.header {clear:both; position: relative; display: block; padding: 70px 20px 20px 20px; font-size: 40px; background-color: grey;} 
    #webpic1 {text-align: center !important;} 
    .Title {margin: 5px; padding: 10px; height: 90px; font-family: 'Comfortaa', arial, sans-serif; font-weight: 900; text-align: center;}

 <div class="header"> 
    <div class="webpic"> 
    <img src="images/weblogo.png" alt="RRR" id="webpic1" height="230px" width="270px"> 
    </div> 
    <h3 class="title">RRR</h3>

非常感谢

Answer 1

使用

.webpic {
  text-align: center
}

或

#webpic1 {
  display: block;
  margin: auto;
}

Answer 2

如果将第二个样式块的目标切换为.webpic并将img元素包含在同一div中，则图像应居中。

.webpic {text-align: center !important;}

<div class="webpic"> 
  <img src="https://placeimg.com/640/480/any" alt="RRR" id="webpic1" height="230px" width="270px">
</div>

Answer 3

只需将此代码添加到css文件中，您的图像就会居中。

.webpic{text-align: center;}

如果要使图像居中，则应文本对齐：将上述类或标签居中。谢谢。

在CSS中移动图像

3 个答案: