CSS：如何在正确对齐其兄弟的同时将元素相对于其父元素居中？

我已经做的，我想做些什么的草图： CSS：如何在正确对齐其兄弟的同时将元素相对于其父元素居中？

我使用的是引导列表组。在最上面的li中，我在h4元素中有一些文本，在span元素中有字形。我想将h4相对于其父li居中（即不考虑span，沿草图中的A），并将span右对齐与h4（沿草图B中的相同高度）。

我已经寻找可能的解决方案，但我似乎无法找到一个适合我的特殊情况。这些元素不是水平对齐的，或者h4只位于其本身的中心（即考虑到span）。

这里有一个小提琴：https://jsfiddle.net/j3vdvtxj/1/

2016-03-18 mapache

你应该用一些标记和样式发表小提琴。 – inorganik

您可以使用相对和绝对位置和transform: translate(-50%, -50%)到垂直和水平居中，还要添加text-right类首先将li拉到右侧。

li:first-child { 
 
    position: relative; 
 
} 
 

 
li:first-child p { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul class="list-group"> 
 
    <li class="list-group-item text-right"> 
 
    <p>Cras justo odio</p> 
 
    <span class="glyphicon glyphicon-search"></span> 
 
    </li> 
 
    <li class="list-group-item">Dapibus ac facilisis in</li> 
 
    <li class="list-group-item">Morbi leo risus</li> 
 
    <li class="list-group-item">Porta ac consectetur ac</li> 
 
    <li class="list-group-item">Vestibulum at eros</li> 
 
</ul>

来源

2016-03-18 14:25:42

太棒了！我非常感激！ – mapache

我很高兴我能帮上忙。 –

更可能你会做这样的事情：

ul.list { 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    list-style-type:none; 
 
} 
 
ul.list li { 
 
    width:100%; 
 
    padding:20px 0; 
 
    background:yellow; 
 
    margin-bottom:10px; 
 
    } 
 
ul.list h4 { 
 
    text-align:center; 
 
    } 
 
ul.list span { 
 
    float:right; 
 
    }

<ul class="list"> 
 
    <li> 
 
    <span>right align me</span> 
 
    <h4>title goes here</h4> 
 
    </li> 
 
    <li> 
 
    <span>right align me</span> 
 
    <h4>title goes here</h4> 
 
    </li> 
 
    <li> 
 
    <span>right align me</span> 
 
    <h4>title goes here</h4> 
 
    </li> 
 
    <li> 
 
    <span>right align me</span> 
 
    <h4>title goes here</h4> 
 
    </li> 
 
</ul>

来源

2016-03-18 14:20:20 inorganik

你可以使用下面的代码。

通过这种方式，您不必关心HTML标签到您的li中的顺序，而且您还可以将文本置于y轴上。

li:first-child { 
 
    position: relative; /* First you create a reference for your h4 absolute item. */ 
 
    text-align: right; /* And you put the span to right. */ 
 
} 
 
li:first-child span, 
 
li:first-child h4 { 
 
    text-align: left; /* You align content as you want. */ 
 
} 
 
li:first-child h4 { 
 
    /* And you X/Y center the h4 content with the `li` relavive reference. */ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
/* The CSS below is not a part of the answer but help the result to be more nice. */ 
 
ul { 
 
    width:100%; 
 
    list-style-type:none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li { 
 
    border: 1px solid #ccc; 
 
} 
 
li span { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    border-left: 1px solid #ccc; 
 
} 
 
li h4 { 
 
    margin: 0; 
 
}

<ul> 
 
    <li> 
 
    <h4>A AAA AA AAA AA A AAAAA A </h4> 
 
    <span>B</span> 
 
    </li> 
 
    <li> 
 
    <h4>A AAA AA AAAAAA<br>AA A AAAAA<br>A AAA AA AAAAAA</h4> 
 
    </li> 
 
    <li> 
 
    <h4>A AAA AAAAA</h4> 
 
    </li> 
 
    <li> 
 
    <h4>A AAA AA<br>AA A AAAAA</h4> 
 
    </li> 
 
</ul>

如果你只是想集中在x轴，只使用left: 50%和transform: translateX(-50%)。

来源

2016-03-18 14:27:03

CSS：如何在正确对齐其兄弟的同时将元素相对于其父元素居中？

回答

相关问题