Question

我正在尝试在代码中垂直对齐div，但没有成功。这个div包含子div。第一个

我希望看起来像这样：

但目前尚未对齐。这是我的HTML代码：

body {
  display: block;
  margin-left: auto;
  margin-right: auto;
  background: #f1f1f1;
}
.content {
  float: left;
  margin: 20px auto;
  text-align: center;
  width: 300px;
}
.content h1 {
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 40px 0;
  font-size: 25px;
  line-height: 30px;
}
.circle {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  /* the magic */
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  text-align: center;
  color: white;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 auto 20px;
}
.blue {
  background-color: #052D72;
}
.green {
  background-color: #16a085;
}
.red {
  background-color: #e74c3c;
}

<div class="content">
  <div class="circle blue"></div>
</div>
<div class="content">
  <div class="circle blue">Blue</div>
  <div class="circle blue"></div>
  <div class="circle blue"></div>
  <div class="circle blue"></div>
</div>
<div class="content">
  <div class="circle blue"></div>
  <div class="circle blue"></div>
</div>

所以，在.content我尝试添加此内容：

vertical-align:baseline;

但我没有看到任何区别。

Answer 1

添加＆amp;删除display:inline-block

的float

#content

https://jsfiddle.net/k0fx384a/1/

使用课程编辑：https://jsfiddle.net/k0fx384a/2/

Answer 2

您已使用具有多个元素的相同import sys from PyQt4.QtCore import * from PyQt4.QtGui import * class tabdemo(QMainWindow): def __init__(self): super(tabdemo, self).__init__() self.setAttribute(Qt.WA_DeleteOnClose) self.tabs = QTabWidget() self.tab1 = QWidget() self.tab2 = QWidget() self.tabs.addTab(self.tab1,"Form View") self.tabs.addTab(self.tab2,"Matrix View") self.tab1UI() self.tab2UI() self.setWindowTitle("tab demo") def tab1UI(self): l1 = QListView() l2 = QListView() model = QStringListModel() model.setStringList(QString("Item 1;Item 2;Item 3;Item 4").split(";")) l1.setModel(model) l2.setModel(model) hbox = QHBoxLayout() hbox.addWidget(l1) hbox.addStretch() hbox.addWidget(l2) self.tab1.setLayout(hbox) def tab2UI(self): vbox = QVBoxLayout() tbl1 = QTableWidget() tbl1.setRowCount(5) tbl1.setColumnCount(5) vbox.addWidget(tbl1) tbl1.setItem(0, 0, QTableWidgetItem("1")) # row, col self.tab2.setLayout(vbox) def main(): app = QApplication(sys.argv) ex = tabdemo() ex.show() sys.exit(app.exec_()) if __name__ == '__main__': main()。所有浏览器都不允许HTML（似乎IE和FF允许多个#id）。

所以只需将#id的所有出现更改为id="content"，CSS就应该开始工作了。

DEMO

Answer 3

将<div id="content">更改为<div class="content">，以便应用这些样式。

Answer 4

如果你想要它们垂直和水平对齐，我建议使用flex。这提供了更大的灵活性，更具有前瞻性。

Mozilla Docs on Flex

如果您使用规则align-items和justify-content，那么您将获得神奇的工作效果。查看示例：https://jsfiddle.net/vrad7yuj/

＆＃13;

.container {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  border: 2px solid #f00;
}
.col {
  border: 2px solid #00f;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ball {
  border-radius: 50%;
  border: 1px solid #0f0;
  height: 60px;
  width: 60px;
}

＆＃13;

<div class="container">
  <div class="col">
    <div class="ball"></div>
  </div>
  <div class="col">
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
  </div>
  <div class="col">
    <div class="ball"></div>
    <div class="ball"></div>
  </div>
</div>

＆＃13;

Answer 5

或者，如果您想使用少量代码行来执行此操作，则可以使用flexbox：

＆＃13;

body {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  background: #f1f1f1;
}
.content {
  display: flex;
  flex-direction: column;
  margin: 20px auto;
  text-align: center;
  width: 300px;
}
.content h1 {
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 40px 0;
  font-size: 25px;
  line-height: 30px;
}
.circle {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  /* the magic */
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  text-align: center;
  color: white;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 auto 20px;
}
.blue {
  background-color: #052D72;
}
.green {
  background-color: #16a085;
}
.red {
  background-color: #e74c3c;
}

＆＃13;

<div class="content">
  <div class="circle blue"></div>
</div>
<div class="content">
  <div class="circle blue">Blue</div>
  <div class="circle blue"></div>
  <div class="circle blue"></div>
  <div class="circle blue"></div>
</div>
<div class="content">
  <div class="circle blue"></div>
  <div class="circle blue"></div>
</div>

＆＃13;

查看flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

应该只是替代解决方案和新知识。 ;-)干杯。

垂直对齐Div

5 个答案: