css底部如何局中？ css三種居中方法
- 云罗郡主轉載
- 2018-10-22 14:37:398655瀏覽
這篇文章帶給大家的內容是關於css底部如何局中？ css三種居中方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
某天組長要我改一個表格的樣式，要求底部局中。當時想很簡單的嘛，哼噠哼哧開始寫了，結果發現怎麼樣都達不到效果（考慮瀏覽器縮放）。一番思考加探討之後總結出了三個方法針對於底部局中。
一、給form的父元素設定{width：60%；margin：0 auto;}
程式碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*
{
padding: 0;
margin: 0;
}
.main{
width: 60%;
margin:0 auto;
}
form{
position:fixed;
bottom: 0;
width: 60%;
display: block;
}
textarea
{
width: 80%;
}
input{
width: 12%;
height: 10%;
position: relative;
bottom:24px;
}
</style>
<body>
<div >
<form id="wiselyForm" >
<textarea rows="4" cols="60" name="text" id="wbk"></textarea>
<input id="xxinput" type="submit" value="Send out"/>
</form>
</div>
</body>
</html>使得div， form只佔據頁面中間一部分，這樣只要達到form在底部即可
將textarea和input=submit寬度鋪滿width=60%即可達到底部局中。
二、text-align:center;
給頁面佈局時這是一個很強大的屬性
*
{
padding: 0;
margin: 0;
}
.main{
width: 100%;
}
form{
position:fixed;
bottom: 0;
width: 100%;
text-align: center;
}
input{
position: relative;
bottom:24px;
}當form寬度鋪滿整個螢幕時text-align：center實作居中，再將其固定到底部。
三、使用left:50%;margin-left：-半個身位；
這是一個很簡單又快速的方法
<div class="main" >
<form id="wiselyForm" >
<textarea rows="4" cols="60" name="text" id="wbk"></textarea>
<input id="xxinput" type="submit" value="Send out"/>
</form>
</div>css:
*{
padding: 0 ;
margin:0;
}
form{
position: fixed;
bottom: 0;
left: 50%;/*相对于可视区窗口，距离窗口左边50%个可视区窗口*/
margin-left:-237px ;/*表格左边距离浏览器左边50%，向左偏移一半的身位表格即可居中*/
}無論視窗放大縮小多少，表格都居中，重點在於margin-left= - 表格的半個身位px
以上就是對css底部如何局中？ css三種居中方法的完整介紹，如果您想了解更多有關CSS視頻教程，請關注PHP中文網。
以上是css底部如何局中？ css三種居中方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除