Question

在我的网站中，我在<body>标记内创建此部分。这是一个片段：

<div id="section" class="featurecontent">
    <section>
        <img src="image.jpg" alt="Featured article">
        <p class="pnews">Featured Article - Description </p>
        <hr>
    </section>
</div>

这是相关的CSS代码，包括通过position: relative;声明与浏览器相关的部分。

#section{
    display: block;
    padding:3px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    height:70%;
    width: 35%;
    border-width: 3px;
}

.featurecontent{
    height: 1100px;
    vertical-align: middle;
    border-width: 2px;
    line-height: 0.5;
    padding: 1px;   
}

如何将图像相对居中放置在剖面块中（而不是放在左侧），并根据类似于剖面块的浏览器大小调整自身？我知道align="middle"不适用于HTML5。

Answer 1

要使图像居中，我认为这是目标，只需将注释旁边的代码添加到当前的CSS中即可。

.featurecontent{
    height: 1100px;
    vertical-align: middle;
    border-width: 2px;
    line-height: 0.5;
    padding: 1px;   
    text-align: center; /* New line of code to center img */
}

Answer 2

你有一大堆不必要的代码......你只需要：

#section {
  position: relative;
  width: 35%;
  margin: 0 auto;
}

.featurecontent {
  text-align: center;
}

在截面中心对齐图像并相对于浏览器

2 个答案: