div居中显示_IT分享知识网

大家好，欢迎来到IT知识分享网。 div居中显示"

以下是div居中显示的3种方法：

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style> /*-- 1.vertical-align居中 */ img { vertical-align: middle; } /*vertical-align div居中*/ .div_out { border: 1px solid red; height: 100px; vertical-align: middle; display: table-cell; } .div_inner { background-color: gray; height: 60px; width: 150px; } /*===vertical-align span居中 必须设置display: table-cell和vertical-align: middle;才可居中====*/ .myspan { margin: 0px; padding: 0px; display: table-cell; height: 100px; border: 1px solid red; vertical-align: middle; text-align: center; } /*-----------line-height=height居中------------------*/ .p_txt { background-color: #cccccc; text-align: center; height: 50px; line-height: 50px; } /*-----------------------------*/ /*===================================*/ .my-parent { height: 200px; width: 100%; /*parent必须是position: relative;*/ position: relative; border: 1px solid red; } .my-body { border: 1px solid red; height: 150px; width: 200px; /*body必须是position: absolute;*/ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /*===================================*/ </style>
</head>
<body>

    <!-- 1. 在CSS中还有一个display 属性能够模拟<table>，所以我们可以使用这个属性 来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和 display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上 但是Internet Explorer 6及以下的版本中是无效的； -->
    <!--div用 display: table-cell 和vertical-align: middle居中 -->
    <!-- .vertical-align居中 -->
    <div>
        <img src="http://tb.himg.baidu.com/sys/portrait/item/8a5a626f796974309906" height="100" /> <img  src="http://tb.himg.baidu.com/sys/portrait/item/8a5a626f796974309906" height="50" /> <span>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
    </div>
    <br>
    <!-- vertical-align div居中 ----------------------------------------------------------------------->
    <br>
    <div class="div_out">
        <div class="div_inner"></div>
    </div>
    <br>
    <!-- vertical-align span居中 ------------------------------------------------------------------------->
    <span class="myspan">在我们要使这段文字垂直居中显示！</span>
    <br>
    <hr>
    <br>
    <!--2.height = line-height居中 ------------------------------------------------------------------------->
    <div class="p_txt">哈哈哈哈哈发货哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
    <br>
    <hr>
    <br>
    <!--3.transform居中 ------------------------------------------------------------------------------------->
    <div class="my-parent">
        <div class="my-body">哈哈哈哈哈哈哈哈发货哈哈哈哈哈哈哈发货哈哈哈哈哈
            哈哈哈哈哈发货哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈发货哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
    </div>
    <br>
    <hr>
    <br>
</body>
</html>

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/10092.html

div居中显示

相关推荐

发表回复