text-align不起作用,替代中心文本看起来不像我想要的那样

时间:2016-08-28 13:40:17

标签: html css twitter-bootstrap

我需要在bootstrap中使用网格系统(我不会使用很多)。 但是当我向它添加文本时,它不会像我希望它一样工作。

这是包含以下列的完整代码:

 <div id="villas">
    <div class="villas-inner">
        <div class="villa-main-text">
            <strong>The</strong> Villa's
        </div>
        <div class="villa-boxes">
            <div class="row">
                <div class="col-md-4">
                    <div class="villa-box">
                        <div class="more-info-villa">
                            <div class="arrow">
                                <i class="fa fa-arrow-right fa-3x" aria-hidden="true"></i>
                            </div>
                        </div>
                        <img src="assets/img/villa1.png" alt="Villa 1">
                        <div class="villa-info">
                            <strong>Villa test</strong><br>
                            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed ante tempor, pulvinar metus ut, euismod velit. Fusce a ligula.</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="villa-box">
                        <div class="more-info-villa">
                            <div class="arrow">
                                <i class="fa fa-arrow-right fa-3x" aria-hidden="true"></i>
                            </div>
                        </div>
                        <img src="assets/img/villa1.png" alt="Villa 1">
                        <div class="villa-info">
                            <strong>Villa test</strong><br>
                            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed ante tempor, pulvinar metus ut, euismod velit. Fusce a ligula.</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="villa-box">
                        <div class="more-info-villa">
                            <div class="arrow">
                                <i class="fa fa-arrow-right fa-3x" aria-hidden="true"></i>
                            </div>
                        </div>
                        <img src="assets/img/villa1.png" alt="Villa 1">
                        <div class="villa-info">
                            <strong>Villa test</strong><br>
                            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed ante tempor, pulvinar metus ut, euismod velit. Fusce a ligula.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我在别墅信息中用于文本的CSS:

position: absolute;
margin: 0;
padding-top: 25px;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);

当我使用text-align:center;而不只是它只是将我的文本对齐到左边。

它创建的结果是:Villa

有人知道如何解决这个问题吗?它已经困扰了很长时间,是否与网格系统或其他东西有关?

提前致谢。

1 个答案:

答案 0 :(得分:0)

在css中使用

protected void Application_Error(Object sender, EventArgs e)
{
    Exception exception = Server.GetLastError();

    if (exception != null)
    {
        this.Session["w"] = (Exception)exception;
        Server.ClearError();
        ExceptionManager.LogExceptionToTextFile(exception);
        ExceptionManager.LogExceptionToEmail(exception);
        if (!Response.IsRequestBeingRedirected)
            Response.Redirect("~/Error/Index");
    }
}

,html代码

.image{
border:2px solid red;
width: 50%;
}