頁腳中的文本不會與底部中心對齊

正如標題所示，我正在嘗試將我的頁腳中的文本對齊到水平中心並與底部對齊。我已經嘗試將父div設置爲relative，p元素設置爲absolute，然後bottom：0;/vertical-align：bottom;但不起作用。頁腳中的文本不會與底部中心對齊

發生什麼是文本向上移動到上面的div並不再是水平居中。

/*Section3*/ 
 
#section3 { 
 
    height: 50%; 
 
    background: #6ed3cf; 
 
    text-align: center; 
 
    padding: 0 0 0.5em; 
 
    height: 20em; 
 
} 
 

 
#section3 h2 { 
 
    font-size: 2em; 
 
    font-weight: 200; 
 
} 
 

 
#section3 i { 
 
    padding: 0.5em; 
 
    color: black; 
 
} 
 

 
/*Footer*/ 
 
#footer { 
 
    background:#fff; 
 
    color: black; 
 
    height: 10%; 
 
    font-family: 'Open Sans', sans-serif; 
 
    position: relative; 
 
    display: table; 
 
} 
 

 
#footer p { 
 
    font-size: 0.7em; 
 
    text-align: center; 
 
    position: absolute; 
 
    bottom: 0; 
 
    vertical-align: bottom; 
 
}

<div id="section3" style="display:flex;justify-content:center;align-items:center;"> 
 
\t <div> 
 
\t \t <h2>header</h2> \t 
 
\t \t <div class="container"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-6 col-md-offset-3"> 
 
\t \t \t \t \t <p>blablablablablablablablablablablablablablablablablablablablabla</p> 
 
\t \t \t \t \t <a href="#"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></a> \t 
 
\t \t \t \t \t <a href="#"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i \t \t \t ></a> \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
<!-- Footer --> 
 
<div id="footer"> 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-4 col-md-offset-4"> 
 
\t \t \t \t <p>text</p> \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

來源

2016-12-16 suonpera

：在頁腳table'？要麼刪除這個屬性，要麼使用'width：100％'。從'p'中刪除不必要的'position：absolute'。 –

當你在一個元素上應用'display：table'時，它的寬度取決於裏面的內容，除非'width'屬性或通過css顯式應用。 –

我有點困惑你的組件的某些屬性，但這裏是我會做：

您<p>元素上刪除position: absolute，和從您的<footer>中刪除display: table。

像這樣：

html { 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    position: relative; 
 
    margin: 0; 
 
    min-height: 100%; 
 
} 
 

 
/*Section3*/ 
 

 
#section3 { 
 
    height: 50%; 
 
    background: #6ed3cf; 
 
    text-align: center; 
 
    padding: 0 0 0.5em; 
 
    height: 20em; 
 
} 
 

 
#section3 h2 { 
 
    font-size: 2em; 
 
    font-weight: 200; 
 
} 
 

 
#section3 i { 
 
    padding: 0.5em; 
 
    color: black; 
 
} 
 

 

 
/*Footer*/ 
 

 
#footer { 
 
    background: #fff; 
 
    color: black; 
 
    height: 10%; 
 
    font-family: 'Open Sans', sans-serif; 
 
    position: absolute; 
 
    width: 100%; 
 
    bottom: 0; 
 
} 
 

 
#footer div { 
 
    height: 100%; 
 
} 
 

 
#footer .row > div { 
 
    width: 100%; 
 
    display: table; 
 
} 
 

 
#footer p { 
 
    display: table-cell; 
 
    font-size: 0.7em; 
 
    text-align: center; 
 
    bottom: 0; 
 
    vertical-align: bottom; 
 
}

<div id="section3" style="display:flex;justify-content:center;align-items:center;"> 
 
    <div> 
 
    <h2>header</h2> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-6 col-md-offset-3"> 
 
      <p>blablablablablablablablablablablablablablablablablablablablabla</p> 
 
      <a href="#"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></a> 
 
      <a href="#"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i \t \t \t ></a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<!-- Footer --> 
 
<div id="footer"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-md-offset-4"> 
 
     <p>text</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-12-16 11:10:15 Chris

這確實是水平居中的文字，但它仍然沒有與底部的 – suonpera

@suonpera對齊，「文字」在底部。你想要在深青色的背景或？ – Chris

是的，它位於頁腳內部，但它不與底部對齊。如果我增加頁腳的高度，文本將被定位在div的頂部 – suonpera

它的工作對我來說，當我給寬度：100％;到我的頁腳屬性。如果你這樣做，那麼文本就會與中間對齊。 PS，我的聲譽犯規讓我添加評論...

來源

2016-12-16 11:08:45 fizzi

是不是將文本定位到水平中間，但它仍然不與底部的底部對齊 – suonpera

您應該檢查「行」和「容器」類是否不會干擾您的頁腳屬性，因爲它們是嵌套的在你的頁腳裏面 – fizzi

請添加寬度樣式#footer的的P元素如下：

#footer p { 
    font-size: 0.7em; 
    text-align: center; 
    position: absolute; 
    bottom: 0; 
    vertical-align: bottom; 
    width:100%; /* added new style */ 
}

如果您有任何問題，請讓我知道。謝謝...

來源

2016-12-16 11:14:13

不起作用。它只是把文本向上移動.. – suonpera

你只是試試這個。

#footer { 
    background:#fff; 
    color: black; 
    height: 10%; 
    font-family: 'Open Sans', sans-serif; 
    position: relative; 
    display: table; 
    width: 100%; 
    text-align: center; 
}

這對我很有用。

來源

2016-12-16 11:19:43

看看爲什麼你使用`顯示該解決你的目的

#section3 { 
 
\t height: 50%; 
 
\t background: #6ed3cf; 
 
\t text-align: center; 
 
\t padding: 0 0 0.5em; 
 
\t height: 20em; 
 
} 
 

 
#section3 h2 { 
 
\t font-size: 2em; 
 
\t font-weight: 200; 
 
} 
 

 
#section3 i { 
 
\t padding: 0.5em; 
 
\t color: black; 
 
} 
 

 
/*Footer*/ 
 
#footer { 
 
    /* background: #fff; */ 
 
    /* color: black; */ 
 
    /* height: 10%; */ 
 
    /* font-family: 'Open Sans', sans-serif; */ 
 
    /* position: relative; */ 
 
    /* display: table; */ 
 
    background: #6ed3cf; 
 
} 
 

 
#footer p { 
 
    font-size: 0.7em; 
 
    text-align: center; 
 
    /* position: absolute; */ 
 
    /* bottom: 0; */ 
 
    /* vertical-align: bottom; */ 
 
    margin-top: 0px; 
 
}

<div id="section3" style="display:flex;justify-content:center;align-items:center;"> 
 
\t \t <div> 
 
\t \t \t <h2>header</h2> \t 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-md-6 col-md-offset-3"> 
 
\t \t \t \t \t \t <p>blablablablablablablablablablablablablablablablablablablablabla</p> 
 
\t \t \t \t \t \t <a href="#"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></a> \t 
 
\t \t \t \t \t \t <a href="#"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i \t \t \t ></a> \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 

 
</div> 
 
<!-- Footer --> 
 
\t <div id="footer"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-4 col-md-offset-4"> 
 
\t \t \t \t \t <p>text</p> \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

來源

2016-12-16 11:31:43

頁腳中的文本不會與底部中心對齊

回答

相關問題