Question

CSS中的垂直居中相对简单。这是我正在使用的代码。

position:relative;
top:50%;
transform:translateY(-50%);

1）这非常适合将多个形状居中放在一起。

2）它非常适合将多个单词集中在一起。

然而奇怪的是，当我在一个居中的单词旁边放置一个居中的形状时，它会变得混乱。这有明显的或不那么明显的原因吗？我该如何解决？

我创造了一个小提琴，所以你可以看到结果。 https://jsfiddle.net/9h1pfpns/

这是我的代码：

.container {
  height: 200px;
  margin: 10px;
  border: 4px solid #754419;
}
.shape {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 250px;
  height: 100px;
  margin-left: 10px;
  background-color: aquamarine;
}
.text {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font: bold 1.25em Arial, Helvetica, sans-serif;
  margin-left: 10px;
  border: 1px solid #754419;
}

<div class="container">
  <div class="shape"></div>
  <div class="text">first</div>
</div>

Answer 1

您可以将文字的CSS更改为： -

.text {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  font: bold 1.25em Arial, Helvetica, sans-serif;
  margin-left: 10px;
  border: 1px solid #754419;
}

为了澄清我删除了以下CSS： -

top: 50%;
transform: translateY(-50%);

并补充说： -

margin: 0 auto;

查看jsFiddle https://jsfiddle.net/01kkavf4/

*更新*

您也可以替换： -

top: 50%;
transform: translateY(-50%);

使用： -

top: 10%;
transform: translateY(-50%);

两者兼而有之： -

https://jsfiddle.net/01kkavf4/

第二种分辨率更适合你的盒子。

只是几种不同的方式。

Answer 2

它不起作用，因为在相对定位和变换抵消之前，the elements are not aligned to the top。默认值为vertical-align: baseline。

只需添加vertical-align: top。

＆＃13;

.container {
  height: 200px;
  margin: 10px;
  border: 4px solid #754419;
}
.item, .text {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
  vertical-align: top;
}
.item {
  width: 250px;
  height: 100px;
  background-color: aquamarine;
}
.text {
  font: bold 1.25em Arial, Helvetica, sans-serif;
  border: 1px solid #754419;
}

＆＃13;

<div class="container">
  <div class="item"></div>
  <div class="text">first</div>
</div>

＆＃13;

无论如何，我建议不要采用这种方法，因为如果容器比内容短，它们会在上下溢出。但是你无法滚动查看上面的溢出。

相反，我推荐flexbox with auto margins。

＆＃13;

.container {
  height: 200px;
  margin: 10px;
  border: 4px solid #754419;
  display: flex;
}
.item, .text {
  margin: auto 0 auto 10px;
}
.item {
  width: 250px;
  height: 100px;
  background-color: aquamarine;
}
.text {
  font: bold 1.25em Arial, Helvetica, sans-serif;
  border: 1px solid #754419;
}

＆＃13;

<div class="container">
  <div class="item"></div>
  <div class="text">first</div>
</div>

＆＃13;

CSS - 垂直居中对象和文本会产生意外结果

2 个答案: