HTML相对中心对齐

Question

我正在尝试使用div和CSS类对齐图像（标记包含在div class =“center”标记中）。我现在正在使用的是Dreamweaver（当我去设计视图时），但是当我在Safari中加载页面时却没有。这是我的代码：

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

很抱歉提出这么简单的问题，我对HTML完全不熟悉，我的经验是在Objective-C中。

Answer 1

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

由于您使用display: inline，因此容器的大小将与其内容相同，并且居中不会产生您所追求的效果。

您可以使用margin: 0 auto将容器置于中心（朝向其父容器），或者将display: inline更改为display: block。

Answer 2

将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;
}

Answer 3

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

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

Answer 4

保证金：0自动。是你在找什么。你也需要一个宽度。

div.center {margin：0 auto;宽度：20％;背景：橙色;}