HTML 相对居中对齐答案

【问题标题】：HTML relative centre alignHTML 相对居中对齐
【发布时间】：2012-04-27 00:36:01
【问题描述】：

我正在尝试使用 div 和 CSS 类将图像居中对齐（标签包含在 div class="center" 标签中）。我目前使用的是在 Dreamweaver 中工作（当我进入设计视图时），但不是在我在 Safari 中加载页面时。这是我的代码：

.center {
  display:inline; 
  text-align:center; 
  -webkit-inline; 
  -webkit-center; 
  background-color:transparent;
}

抱歉问了这么简单的问题，我对 HTML 完全陌生，我的经验是在 Objective-C 中。

【问题讨论】：

【解决方案1】：

你可以使用 margin : 0 auto 来进行垂直对齐，但是如果你想要一个垂直-水平对齐，你需要这样的代码：

.center{
width:200px;
height:200px;
margin-left:-100px;
margin-top:-200px;
position:absolute;
top :50%;
left:50%;
}

【讨论】：

【解决方案2】：

text-align: center 导致内容居中（在容器内），而不是容器本身居中。

由于你使用display: inline，容器的大小会和它的内容一样，居中不会有你想要的效果。

要么使用margin: 0 auto 将容器居中（朝向其父容器），要么将display: inline 更改为display: block。

【讨论】：

【解决方案3】：

边距：0 自动。是你要找的。你还需要一个宽度。

div.center { 边距：0 自动；宽度：20%；背景：橙色；}

【讨论】：

肯定会调用绝对定位？
不，这无关。绝对定位是关于从流程中移除一个元素，并能够在页面上任何我们想要的位置定位，而无需与流程的其余部分（内容的其余部分）进行任何交互。当您想要叠加内容、弄乱网页等时很有用；) 如果您是初学者，请尽量避免绝对定位。

【解决方案4】：

将text-align:center; 赋予它的.center 父DIV。像这样写：

HTML

<div class="parent">
 <div class="center"></div>
</div>

CSS

.parent{
 text-align:center;
}

.center {
 display:inline;
 background-color:transparent;
}

【讨论】：