表细胞

Question

我有一个标题行，其中一些标题名称太长而无法放在一行上而必须拆分。标题高度固定，足以容纳两条线。文本应垂直居中。

类似的东西：

＆＃13;

.container {
  width: 100%;
  height: 40px;
}
.pill {
  display: inline-block;
  width: 33%;
  background-color: red;
  text-align: center;
  height: 40px;
}

＆＃13;

<div class="container">
  <div class="pill">
    Header One
  </div>
  <div class="pill split">
    Header
    <br/>Two
  </div>
  <div class="pill">
    Header Three
  </div>
</div>

＆＃13;

我无法弄清楚如何正确对齐所有这些标头。将line-height设置为40px会使第二个标题为双高;将高度设置为40px会使它们不对齐。

谢谢！

Answer 1

所以这就是我在代码中改变的内容：

添加vertical-align: middle以对齐pill s
使用line-height选择器为pill以外的split提供not相同的身份：
```
.pill:not(.split) {
  line-height: 40px;
}
```
在较小的显示屏中，菜单会换行 - 因此也请使用float和clear。

让我知道你对此的想法，谢谢！

＆＃13;

.container {
  width: 100%;
  height: 40px;
}
.pill {
  display: inline-block;
  vertical-align: middle;
  float: left;
  width: 33%;
  background-color: red;
  text-align: center;
  height: 40px;
}
.pill:not(.split) {
  line-height: 40px;
}
.pill:after{
  content: '';
  display: block;
  clear: both;
}

＆＃13;

<div class="container">
  <div class="pill">
    Header One
  </div>
  <div class="pill split">
    Header
    <br/>Two
  </div>
  <div class="pill">
    Header Three
  </div>
</div>

＆＃13;

Answer 2

Flexbox可以做到这一点：

＆＃13;

.container {
  width: 100%;
  height: 40px;
  display: flex;
}
.pill {
  display: flex;
  flex: 0 0 30%;
  margin: 0 1%;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: red;
  height: 40px;
}

＆＃13;

<div class="container">
  <div class="pill">
    Header One
  </div>
  <div class="pill split">
    LONG HEADER TEXT GOES HERE
  </div>
  <div class="pill">
    Header Three
  </div>
</div>

＆＃13;

Answer 3

一个选项是改变你并排设置元素的方式，而不是void Server::handleConnection() { std::cout << "Connected to host" << std::endl; m_inaddr = new QUdpSocket(this); connect(m_inaddr, SIGNAL(readyRead()), this, SLOT(readyReadUdp())); QHostAddress addr = m_socket.udp->peerAddress(); quint16 port = m_socket.udp->peerPort(); bool conn = m_inaddr->bind(45678); if (conn) { m_inaddr->connectToHost(addr, port); std::cout << "Bound to: " << addr.toString().toStdString() << " port:" << port << std::endl; } }：

表细胞

inline-block

.container {
  width: 100%;
  height: 40px;
}
.pill {
  padding:10px;
  border:1px solid white;
  display: table-cell;
  width: 33%;
  background-color: red;
  text-align: center;
  height: 40px;
  vertical-align:middle;
}

Answer 4

将以下内容添加到.pill css：

vertical-align:middle;

Here is an example

对齐单线和双线容器

4 个答案:

表细胞