div⾥某⼀元素右对齐_CSS（⼀）布局 - ⽔平 & 垂直对齐
元素居中对齐
margin: auto;。
要⽔平居中对齐⼀个元素(如 <div>), 可以使⽤ margin: auto;
设置到元素的宽度将防⽌它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配：
注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作⽤。
HTML
<body>
<div class="center">
<p><b>注意: </b>使⽤ margin:auto ⽆法兼容 IE8, 除⾮ !DOCTYPE 已经声明。</p>
</div>
</body>
CSS
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
效果图如下
⽂本居中对齐
text-align: center;
如果仅仅是为了⽂本在元素内居中对齐，可以使⽤ text-align: center;
HTML
<body>
<h2>⽂本居中对齐</h2>
<div class="center">
<p>⽂本居中对齐。</p>
</div>
</body>
CSS
text-align: center;
border: 3px solid green;
}
效果图
图⽚居中对齐
要让图⽚居中对齐, 可以使⽤ margin: auto;
块 元素中:
margin: auto; 并将它放到 块
HTML
<body>
<h2>图⽚居中对齐</h2>
<p>要让图⽚居中对齐, 可以使⽤ margin: auto; 并将它放到块元素中：</p>
<img src="//static.runoob/images/mix/paris.jpg" alt="Paris" > </body>
CSS
img {
display: block;
margin: 0 auto;
}
左右对齐 - 使⽤定位⽅式
我们可以使⽤ position: absolute;
position: absolute; 属性来对齐元素:
HTML
<h2>右对齐</h2>
<p>以下实例演⽰了如何使⽤ position 来实现右对齐:</p>
<div class="right">
<p>我要右对齐！！</p>
css设置文字垂直居中
</div>
</body>
CSS
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
margin 和 padding
padding 。 这样可以避免在不同的浏览器中出现可见的差
<body> 元素会设置 margin
提⽰: 当使⽤ position
position 来对齐元素时, 通常 <body>
提⽰:
异。
当使⽤ position 属性时，IE8 以及更早的版本存在⼀个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使⽤position 属性时，请始终设置 !DOCTYPE 声明：
HTML
<body>
<div class="container">
<div class="right">
<p><b>注意: </b> 当使⽤ position 属性时，请始终设置 !DOCTYPE 声明</p>
</div>
</div>
</body>
CSS
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 90%;
height:200px;
border:1px solid red;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
左右对齐 - 使⽤ float ⽅式
float 属性来对齐元素:
也可以使⽤ float
HTML
<body>
<h2>右对齐</h2>
<p>以下实例演⽰了使⽤ float 属性来实现右对齐:</p>
<div class="right">
<p>我⽼爹在⼩时候给我的⼀些⼈⽣建议，我现在还记忆深刻。</p>
</div>
</body>
CSS
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
当像这样对齐元素时，对 <body> 元素的外边距和内边距进⾏预定义是⼀个好主意。这样可以避免在不同的浏览器中出现可见的差异。
注意：如果⼦元素的⾼度⼤于⽗元素，且⼦元素设置了浮动，那么⼦元素将溢出，这时候你可以使⽤ "clearfix(清除浮动)" 来解决该问题。并在⽗元素上添加 overflow: auto; 来解决⼦元素溢出的问题:
HTML
<body>
<p>以下实例图在⽗元素中溢出，很不美观:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
⼦元素⾼度⼤于⽗元素⾼度时，⼀点都不可爱
</div>
<p >在⽗元素上通过添加 clearfix 类，并设置 overflow: auto; 来解决该问题:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
⼦元素⾼度不要超过⽗元素⾼度，不然就不美了哦
</div>
</body>
CSS
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.clearfix {
overflow: auto;
}
.img2 {
float: right;
}
垂直居中对齐 - 使⽤ padding
padding:
CSS 中有很多⽅式可以实现垂直居中对齐。 ⼀个简单的⽅式就是头部顶部使⽤ padding
HTML

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。