Question

我有一张照片和文字在下面，我怎么能将两者都放在中心并使它们在彼此之下（宽度相等）。另外，为了将它们放在网页的中间，我尝试了"div: wrapper"，但它没有用，有什么想法吗？

 <?php 

 require "header.php";
 ?>
  <!DOCTYPE html>
<html>
  <body>

 <img src="Page.jpg" alt="HTML5 Icon" width="1200" height="500">

 <div style='background-color:gray; color:white;align:center; width:1500; height:500;  position: absolute;'>

 <h3 style= 'font-weight:bold'>TEXT HERE.<br>

TEXT HERE

 </div>
</body>
</html>

Answer 1

您可以使用figure和figcaption，在块级元素中使用margin:auto将成为您网页的中心

请注意，您的代码有一些错误：

width/height是无单位的
align是一个不存在的属性，您正在寻找text-align
并且不使用内联样式

＆＃13;

body,
figure,
h3  {
  margin: 0
}
figcaption {
  background-color: gray;
  color: white;
  text-align: center
}
figcaption,
img {
  width: 500px;
  /*changed for demo*/
  margin: auto;
  max-width: 100%;
  display: block
}
img {
  height: 500px
}

＆＃13;

<figure>
  <img src="//placehold.it/1200x500" alt="HTML5 Icon">
</figure>
<figcaption>
  <h3><strong>TEXT HERE.</strong><br /></h3>
  TEXT HERE
</figcaption>

＆＃13;

使用html居中属性

1 个答案: