我正在尝试有一个具有多个父div的祖父母。一些父div包含3个元素,而另一些仅具有1。我需要父div的2nd元素始终在中间对齐(并且还要与1元素div类型的单个元素对齐)。 3元素div类型中的第一个和第三个元素需要接触第二个元素,并且仅在它们的内容增长时才朝边缘移动。如何使用CSS实现呢?我在线上找到的大多数解决方案都涉及到使用边距或绝对定位,但是这弄乱了第二个元素与需要触摸第二个元素的第一个/第三个元素之间的关系。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="grandparent">
<div class="parent">
<span class="left-side">First Text!</span>
<span class="must-be-centered">SOME TEXT!</span>
<span class="right-side">Other Text!</span>
</div>
<div class="parent">
<span class="must-be-centered">SOME TEXT!</span>
</div>
</div>
请注意,中间的黄色大元素正好位于中间,而左右元素正接触中间的元素。仅包含一个元素的div仍然具有一个完美居中的元素。 红色是祖父母 蓝色是父母 黄色是儿童跨度
答案 0 :(得分:2)
您可以使用网格将.parent分为3个部分,左右两边的长度相等,并且文本对齐:右边在左侧
.parent {
display: grid;
grid-template-columns: 1fr auto 1fr;
}
.left-side {
text-align: right;
}
.must-be-centered {
grid-column-start: 2;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="grandparent">
<div class="parent">
<span class="left-side">First Text!</span>
<span class="must-be-centered">SOME TEXT!</span>
<span class="right-side">Other Text!</span>
</div>
<div class="parent">
<span class="must-be-centered">SOME TEXT!</span>
</div>
</div>
答案 1 :(得分:2)
您可以使用flexbox将列水平居中对齐。每个.child
类将与具有display: flex
.grandparent {
background-color: #18bbf0;
padding: 12px;
color: #fff;
font-family: Arial;
text-align: center;
}
.parent {
display: flex; /* control child behavior */
justify-content: center; /* horizontal centering */
background-color: #fff;
padding: 12px;
}
.child {
background-color: #18bbf0;
padding: 12px;
}
<div class="grandparent">
<div class="parent">
<div class="child">First Text!</div>
<div class="child">SOME TEXT!</div>
<div class="child">Other Text!</div>
</div>
<div class="parent">
<div class="child">SOME TEXT!</div>
</div>
</div>
答案 2 :(得分:1)
可以帮助您入门的东西。
#parent {
width: 100vw;
height: 100vh;
}
.row {
display: flex;
justify-content: center;
background: blue;
height: 200px;
align-items: center;
}
.row > div {
background: yellow;
height: 100px;
margin: 0 10px;
border: 1px solid red;
width: 150px;
}
.row > div:only-child,
.row > div:nth-child(even) {
flex: 0 0 400px;
}
<div id="parent">
<div class="row">
<div></div>
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
</div>
</div>
答案 3 :(得分:1)
使用Bootstrap类,它将像这样工作(不需要额外的CSS)...
; Start the ENVI application
e = ENVI()
; List all .til files in the subdirectories for the given scene
satFiles = FILE_SEARCH('2_Gain_Offset/' + FILE_BASENAME(zipFile, '.zip'), '*M1BS*' + '*.TIL')
satScenes = List()
; Loop through each .til file and add each file to satScenes
FOR j = 0, N_ELEMENTS(satFiles) - 1 DO BEGIN
raster = e.OpenRaster(satFiles[j], DATA_IGNORE_VALUE = -9999)
satScenes.Add, raster
ENDFOR
答案 4 :(得分:1)
Flexbox使这种布局非常容易。在.must-be-centered
div上,查看允许其增长的flex: 1 0 auto;
规则和max-width
来调节大小的组合。
body {
background: red;
}
.parent {
background: blue;
display: flex;
justify-content: center;
margin: 0 0 20px;
padding: 20px;
}
.parent > span {
background: yellow;
text-align: center;
margin: 0 10px;
padding: 20px;
}
.must-be-centered {
flex: 1 0 auto;
max-width: 200px;
}
<div class="grandparent">
<div class="parent">
<span class="left-side">First Text!</span>
<span class="must-be-centered">SOME TEXT!</span>
<span class="right-side">Other Text!</span>
</div>
<div class="parent">
<span class="must-be-centered">SOME TEXT!</span>
</div>
</div>
答案 5 :(得分:1)
我只是为您的所有情况编写基本的代码段,希望对您有所帮助。谢谢
Set
.grandparent {
background-color: red;
height: 100vh;
padding: 10px;
}
.parent {
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
padding: 10px;
min-height: 100px;
}
span {
background-color: yellow;
padding: 10px;
}
.must-be-centered {
margin: 0 10px;
}
答案 6 :(得分:0)
您可以尝试使用display:flex。尝试在父元素上设置以下内容:
.parent {
display:flex;
justify-content:center;
}
答案 7 :(得分:0)
听起来您在讲的是垂直对齐方式,而不是水平对齐方式。这可以通过flex轻松完成:
.grandparent{
display: flex;
flex-direction: column;
}
.parent{
display: flex;
justify-content:center;
align-items:center;
}