垂直对齐标题与警报和按钮

我想垂直对齐标题标题，警报和两个按钮。我的目标是让警报的宽度更大，即使其内容很短。我的问题是，因为我使用span作为警报，所以我需要将它放在display: inline-block的样式中，但是通过这样做，与标头的对齐会错位。顺便说一句，我正在使用Bootstrap。垂直对齐标题与警报和按钮

这里是什么，我希望发生的形象：

这里是我的HTML：

<h1> 
    <span>This will be a very long title</span> 
    <span class="alert custom"> 
     This is notification! 
    </span> 
    <span class="pull-right"> 
     <button class="btn button-round">O</button> 
     <button class="btn button-round">X</button> 
    </span> 
</h1>

这里是我的CSS：

.button-round { 
    border-radius: 50%; 
    color: white; 
    background: green; 
} 

.custom{ 
    font-size: 12px; 
    vertical-align: middle; 
    background: green; 
    color: white; 
}

这里是一个的jsfiddle我当前代码： JSFiddle of my current code

来源

2017-02-19 shriekyphantom

为了简单起见，你应该使用柔性：

.button-round { 
 
    border-radius: 50%; 
 
    color: white; 
 
    background: green; 
 
    margin: auto 
 
} 
 

 
.custom { 
 
    font-size: 12px; 
 
    vertical-align: middle; 
 
    background: green; 
 
    color: white; 
 
    /* added */ 
 
    flex: 1; 
 
    margin: 0 0.25em; 
 
} 
 

 
h1 { 
 
    display: flex; 
 
} 
 

 

 
/* end added */

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--> 
 
<h1> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <span>This will be a very long title</span> 
 
    <span class="alert custom"> 
 
    This is notification! 
 
</span> 
 
    <span class="pull-right"> 
 
    <button class="btn button-round">O</button> 
 
    <button class="btn button-round">X</button> 
 
</span> 
 
</h1>

https://jsfiddle.net/fczbe58L/1/

来源

2017-02-19 12:36:23

非常感谢您！这工作完美。 – shriekyphantom

垂直对齐标题与警报和按钮

回答

相关问题