Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 如何在居中Div-CSS的左侧和右侧获取行_Html_Css - Fatal编程技术网
Fatal编程技术网
  • html/
  • Html 如何在居中Div-CSS的左侧和右侧获取行

Html 如何在居中Div-CSS的左侧和右侧获取行

html css

Html 如何在居中Div-CSS的左侧和右侧获取行,html,css,Html,Css,我在一个div中有三个div，如下所示： <div class="row second-top-margin"> <div class="col-md-12 center"> <div class="center-text">Responsive</div> <div class="center-text">Clean</div> <div class="cent

我在一个div中有三个
div
，如下所示：

<div class="row second-top-margin">
    <div class="col-md-12 center">
        <div class="center-text">Responsive</div>
        <div class="center-text">Clean</div>
        <div class="center-text">Powerful</div>
    </div>
</div>


反应敏捷的
清洁的
强大的
我要做的是，在单词clean的左右两边，垂直对齐中心，像这样：

有没有一种方法可以用CSS实现这一点？我试过很多不同的方法。我试图将左行“Clean”和右行都放在三个单独的div中，放在一个名为
table
的新div中，并使它们
display:table cell
，但是当我去掉
display:inherit
样式时，“Clean”不再显示在中间

请看我的JS小提琴，看看我在哪里：

有什么建议吗？谢谢

另外，我现在意识到这些行是底部的边框-我需要垂直对齐它们的中心，我只是想让它们在“干净”的左右两侧。

不要使用
display:table
将项目居中。它在20年前就不再正常了。
我倾向于认为
display:table
在用于居中时被误用（一种肮脏的攻击）（这比在任务中使用
元素要好得多，这更糟糕，但仍然是一种误用）。一个简单的

.between-lines {
  display: flex;
  align-items: center;
}
。。。行。更新示例（摘自fiddle）：

.center{
文本对齐：居中；
}
.居中文本{
颜色：#ffffff；
显示：继承；
字体系列：“proxima_nova_ltsemibold”；
文本转换：大写；
字体大小：52px；
}
.字里行间{
显示器：flex；
对齐项目：居中；
}
.线路{
边框底部：2个实心#ffffff；
显示：块；
柔性生长：1；
身高：0；
}
.干净{
显示：块；
字体系列：“proxima_nova_ltsemibold”；
文本转换：大写；
字体大小：52px；
文本对齐：居中；
颜色：#ffffff；
填充：02rem；
}
身体{
背景：#000000；
}

反应敏捷的
清洁的
强大的
不要使用
display:table
将项目居中。它在20年前就不再正常了。
我倾向于认为
display:table
在用于居中时被误用（一种肮脏的攻击）（这比在任务中使用
元素要好得多，这更糟糕，但仍然是一种误用）。一个简单的

.between-lines {
  display: flex;
  align-items: center;
}
。。。行。更新示例（摘自fiddle）：

.center{
文本对齐：居中；
}
.居中文本{
颜色：#ffffff；
显示：继承；
字体系列：“proxima_nova_ltsemibold”；
文本转换：大写；
字体大小：52px；
}
.字里行间{
显示器：flex；
对齐项目：居中；
}
.线路{
边框底部：2个实心#ffffff；
显示：块；
柔性生长：1；
身高：0；
}
.干净{
显示：块；
字体系列：“proxima_nova_ltsemibold”；
文本转换：大写；
字体大小：52px；
文本对齐：居中；
颜色：#ffffff；
填充：02rem；
}
身体{
背景：#000000；
}

反应敏捷的
清洁的
强大的
试试这个：

.center{
文本对齐：居中；
}
.居中文本{
颜色：#ffffff；
显示：继承；
字体系列：“proxima_nova_ltsemibold”；
文本转换：大写；
字体大小：52px；
}
.桌子{
显示：表格；
}
.干净{
显示：-webkit框！重要；
}
人力资源{
显示：表格；
宽度：60%；
}
.线路{
边框底部：2个实心#ffffff；
显示：表格单元格；
}
.干净{
显示：表格单元格；
字体系列：“proxima_nova_ltsemibold”；
文本转换：大写；
字体大小：52px；
文本对齐：居中；
颜色：#ffffff；
}
身体{
背景：#000000；
}

反应敏捷的
清洁
强大的
试试这个：

.center{
文本对齐：居中；
}
.居中文本{
颜色：#ffffff；
显示：继承；
字体系列：“proxima_nova_ltsemibold”；
文本转换：大写；
字体大小：52px；
}
.桌子{
显示：表格；
}
.干净{
显示：-webkit框！重要；
}
人力资源{
显示：表格；
宽度：60%；
}
.线路{
边框底部：2个实心#ffffff；
显示：表格单元格；
}
.干净{
显示：表格单元格；
字体系列：“proxima_nova_ltsemibold”；
文本转换：大写；
字体大小：52px；
文本对齐：居中；
颜色：#ffffff；
}
身体{
背景：#000000；
}

反应敏捷的
清洁
强大的

一个要考虑的是语义。对此类内容使用
span
元素，而不是
div
元素，因为尽管三行内容在不同的行上，但它们是相同思想/想法的一部分。因此，它们都应该包含在
div
中，但每个部分都跨越
div
的一部分。通常情况下，结构越不复杂，越容易设计样式。在删除了不必要的东西和简单的CSS之后，剩下的部分就完成了。无
显示：需要表格



正文{
背景：#000000；
}
.center{text align:center；}
.线路{
显示：内联块；
宽度：15%；
垂直对齐：中间对齐；
}
.盒子{
字体系列：“proxima_nova_ltsemibold”；
文本转换：大写；
字体大小：52px；
颜色：#ffffff；
}
.col-md-12{显示：内联块；宽度：75%；边距：自动；}



反应敏捷的




清洁的




强大的

一个要考虑的是语义。对此类内容使用
span
元素，而不是
div
元素，因为虽然三行内容在不同的行上，但它们是p