CSS 两层实现垂直居中（外层固定宽高，内层文本不定行数）

style代码

.inner{
　　width: 45%;
　　height: 60px;
　　float: left;
　　border: 1px solid #eeeeee;
　　text-align: center;
　　display: table;
}
.outer .inner{
　　display: table-cell;
　　vertical-align: middle;
　　padding: 0 2px;
}

html代码

<div class="outer">
　　<span class="inner">这里是文本</span>
</div>

时间： 2024-11-08 15:35:50

CSS 两层实现垂直居中（外层固定宽高，内层文本不定行数）的相关文章

在一个没有固定宽高的容器中,为什么设置position:absolute后就可以全屏显示了?

此场景适用于移动端百分比布局,背景全屏显示. 在一个没有固定宽高的容器中设置背景,想要背景全屏显示,设置宽高100%后还需设置position:absolut; 原因: absolute会脱离normal float, 即该元素会直接以root标签(类似window但不是<html>标签)进行参照,而root标签的高度存在具体数值, 即浏览器视窗高度, 有明确px值. 而relative不会脱离normal float, 他的height会直接依赖直接父元素(em单位也是), 所以百分比计算出

CSS实现垂直水平居中的三个方法：(1)固定宽高 (2)不固定宽高 (3)Flex

这两天迷上逛一些前端技术网站和论坛了,据说学前端要学会记录才能加深印象,所以有事没事还是写些随笔吧. 以前还在一个公司的面试试卷里做到过: 垂直居中: 1.父元素设置position:relative, 子元素设置position:absolute; top:50%; margin-top: -元素高度 2.height: 500px; line-height: 500px; 水平居中: 1.text-align:center 2.margin: 0 auto; 以上是我之前写的答案,接下来看看

纯CSS实现：垂直居中，未知宽高，已知宽高，IE5除外所有浏览器均兼容

纯CSS实现:盒子内元素垂直居中,宽高固定与否均可,IE5除外所有浏览器均兼容: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>纯CSS实现:盒子内元素垂直居中,宽高固定与否均可,IE5除外所有浏览器均兼容</title> 6 <style> 7 *{ margin:0; padding:0; } 8 di

【实习项目记录】(三)调整网络图片固定宽高

很多时候服务器端传过来的图片大小不统一.在ImageView里面设置这个属性可以让图片显示的时候统一大小. android:scaleType="centerCrop" android:scaleType是控制图片如何resized/moved来匹对ImageView的size. android:scaleType值的意义区别: CENTER /center  按图片的原来size居中显示,当图片长/宽超过View的长/宽,则截取图片的居中部分显示 CENTER_CROP / cent

css 两列布局中单列定宽单列自适应布局的6种思路

前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现布局 float [思路一]float 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.如果各浮动元素的高度不同时,可能会出犬牙交错的效果 [1]float + margin 将定宽的一列使用float,而自适应的一列使用计

如何实现固定宽高的DOM元素的水平垂直居中

效果: 实现代码1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{margin: 0; padding: 0;} #div1{ margin-top: 100px; margin

水平垂直居中（固定宽不固定宽）

1.水平垂直居中 方法一:使用absolute定位的时候,元素脱离文档流,导致margin:auto;失效,需要配合使用left:0;right:0;top:0;bottom:0; <div class="box"> <div class="center-middle"></div> </div> .box{ position:relative; width:300px; height:300px; backgroun

css3不固定宽高水平垂直居中

display:-webkit-flex; //这个一定要 justify-content:center;//子元素水平居中 align-items:center;//子元素垂直居中 在父级元素上面加上上面3句话,就可以实现子元素水平垂直居中了. 原文地址:https://www.cnblogs.com/xi-li/p/10972276.html

css三栏布局：左右固定宽中间自适应

圣杯布局 直接上代码:html: <div class="container> <div class="middle"></div> <div class="left"></div> <div class="right"></div> </div> css: .middle,.left,.right {float: left; positio