在部分中心对齐图像并相对于浏览器答案

【问题标题】：Align Image in Center of Section and Be Relative to the Browser在部分中心对齐图像并相对于浏览器
【发布时间】：2015-08-01 01:32:12
【问题描述】：

在我的网站中，我在<body> 标记内创建了这个部分。这是一个sn-p：

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

【问题讨论】：

标签： javascript html css dhtml

【解决方案1】：

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

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

.featurecontent {
  text-align: center;
}

【讨论】：

【解决方案2】：

为了使图像居中，我认为这是目标，只需将代码添加到当前 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 */
}

【讨论】：