css

如何将内容居中 div 通过 CSS?

如何将内容居中 div 水平和垂直？
2021-03-22 添加评论
分享

没有找到相关结果

    已邀请:

    卫东

    赞同来自:

    水平对齐它非常简单：


    <style type="text/css"> 
    
body {
    
 margin: 0; 
    
 padding: 0;
    
 text-align: center;
    
}
    
.bodyclass #container { 
    
 width: ???px; /*SET your width here*/
    
 margin: 0 auto;
    
 text-align: left;
    
} 
    
</style>
    
<body class="bodyclass">
    
<div id="container">type your content here</div>
    
</body>


    对于垂直对齐，有点困难：
    这里
    http://www.jakpsatweb.cz/css/c ... .html

    HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    
<html>
    
<head>
    
<title>Universal vertical center with CSS</title>
    
<style>
    
 .greenBorder {border: 1px solid green;} /* just borders to see it */
    
 </style>
    
</head>
    
<body>
    
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    
<div class="greenBorder" style=" #position: relative; #top: -50%">
    
 any text<br/>
    
 any height<br/>
    
 any content, for example generated from DB<br/>
    
 everything is vertically centered
    
 </div>
    
</div>
    
</div>
    
</body>
    
</html>
    2021-03-22 0 0
    分享

    石油百科

    赞同来自:

    它必须满足您的需求。 这是一个技巧 CSS-2D-transition. 我最近面临以下决定：


    * {
    
 font-family: Arial;
    
 font-size: 14px;
    
 -webkit-font-smoothing: antialiased;
    
 text-rendering: optimizeLegibility;
    
}
    

    
*:after,
    
*:before {
    
 content: "";
    
 display: table;
    
}
    

    
*:after {
    
 clear: both;
    
}
    

    
.title {
    
 font-family: Georgia;
    
 font-size: 36px;
    
 line-height: 1.25;
    
 margin-top: 0;
    
}
    

    
.blocks {
    
 position: relative;
    
}
    

    
.block {
    
 position: relative;
    
 display: inline-block;
    
 float: left;
    
 width: 200px;
    
 height: 200px;
    
 font-weight: bold;
    
 color: #FFFFFF;
    
 margin-right: 10px;
    
 margin-bottom: 10px;
    
}
    

    
.block:first-child {
    
 background-color: green;
    
}
    

    
.block:nth-child/2/ {
    
 background-color: red;
    
}
    

    
.block:nth-child/3/ {
    
 background-color: blue;
    
}
    

    
.h-center {
    
 text-align: center;
    
}
    

    
.v-center span {
    
 position: absolute;
    
 left: 0;
    
 right: 0;
    
 top: 50%;
    
 transform: translate/0, -50%/;
    
}



    <h1 class="title">3 Boxes with different text-align settings.</h1>
    
<div class="blocks">
    
<div class="block h-center">horizontally centered lorem ipsun dolor sit amet</div>
    
<div class="block v-center"><span>vertically centered lorem ipsun dolor sit amet lorem ipsun dolor sit amet</span></div>
    
<div class="block h-center v-center"><span>horizontally and vertically centered lorem ipsun dolor sit amet</span></div>
    
</div>



    注意：它还适用于伪元素： after 和： before.

    您也可以在此阅读：
    http://css-tricks.com/centerin ... ents/
    您可以在这里查看：
    http://jsfiddle.net/y0081cgL/1/
    2021-03-22 0 0
    分享

    龙天

    赞同来自:

    全部调整 css.
    如果可能的话，将其捆绑在一起
    高度和宽度为 100% 和
    td 在中间的垂直对齐中安装它，在中心的文本对齐
    2021-03-22 0 0
    分享

    莫问

    赞同来自:

    通过 transform: 奇迹般有效！


    <div class="parent">
    
<span>center content using transform</span>
    
</div>
    

    
 //CSS
    
 .parent {
    
 position: relative;
    
 height: 200px;
    
 border: 1px solid;
    
 }
    
 .parent span {
    
 position: absolute;
    
 top: 50%;
    
 left: 50%;
    
 -webkit-transform: translate/-50%, -50%/;
    
 transform: translate/-50%, -50%/;
    
 }
    2021-03-22 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved