Question

我在引导警报部分中添加了一个表示为x的按钮。可以有多行消息但x按钮位于右上角。我需要x按钮在中间垂直对齐。我试过“style =”vertical-align：middle“但它不起作用。感谢任何帮助。谢谢。

<div class="alert alert-danger alert-dismissable" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true" style="vertical-align: middle">×</button>
    <div class="row">
        <div class="col-sm-12">
            <ul style="list-style-type: none">
                @{
                    string[] errorlist = errorMessage.Split(new string[] { Environment.NewLine }, StringSplitOptions.None);
                    foreach (string error in errorlist)
                    {
                        if (!string.IsNullOrEmpty(error))
                        {
                            <li><i class="glyphicon glyphicon-remove" style="color: #FF0004;"></i> @error</li>
                        }
                    }
                }
            </ul>
        </div>
    </div>
</div>

Answer 1

有一个Fiddle示例可以使用div执行此操作。

<div class="parentbox">
    <div class="childbox">
       I shall be in the middle of parentbox regardless of its size!
    </div>
</div>

.parentbox {
    width:500px;
    height:400px;
    border-style:solid;

    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.parentbox:before {      /* create a full-height inline block pseudo-element */
    content: ' ';
    display: inline-block;
    vertical-align: middle; /* vertical alignment of the inline element */
    height: 100%;
}

.childbox {
    display: inline-block;
    vertical-align: middle;          /* vertical alignment of the inline element */
    font: 16px/1 Arial, sans-serif;  /* reset the font property */

    padding: 5px;
    border: 2px solid black;
}

asp.net mvc bootstrap在boostrap警报部分

1 个答案: