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

score 5 · Accepted Answer

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

既然你使用display: inline了，容器的大小就会和里面的内容一样，居中不会有你想要的效果。

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

score 4 · Accepted Answer

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

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

4 回答 4