Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在div内垂直对齐span ?

如何在div内垂直对齐span ?

提问于 2018-03-11 16:25:10
回答 2关注 0查看 270
代码语言:txt
AI代码解释
复制
<div class="container">

    <span>Some text, yay</span>

</div>

<div class="container">

    <span>Some text, yay. But shit time, there is alot of text, so we get a problem with breaking lines and the given height :( How can I align vertical now?</span>

</div>
<style>
.container {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 1px solid black;
}

.container span {
    padding-left: 30px;
}
</style>

回答 2

社会人就是

回答已采纳

发布于 2018-03-12 01:11:14

将CSS更新为

代码语言:txt
AI代码解释
复制
.container {
  width: 100%;
  height: 50px;
  display: table-cell;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
}

.container span {
}

猪猪3516347

发布于 2018-03-12 02:24:57

你应该试试这个:

代码语言:txt
AI代码解释
复制
.container {
    width: 100%;
    height: 50px;
    border: 1px solid black;
    display: table;
    text-align: center;
}

.container span {
    display: table-cell;
    vertical-align: middle;
}
和开发者交流更多问题细节吧,去 写回答
相关文章
span不如div的地方
页面中产生格式化的效果,我一般比较喜欢用span,因为其本身就是inline的,但是,在进行精细控制时就不行了,比如我想要这个效果,每行由三个部分构成:时间,柱状图,数值,分布用span表示,用br换
用户1075292
2018/01/23
1.9K0
span不如div的地方
div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中。 div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div css让这个登录布局水平和css垂直居中。 这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法。 第一种方法:具体实例代码如下
李维亮
2021/07/09
2.9K0
div垂直居中的几种方式_div垂直水平居中
利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。
全栈程序员站长
2022/08/03
4.3K0
div垂直居中的几种方式_div垂直水平居中
div内图片和文字水平垂直居中「建议收藏」
想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。 关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法,用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额外标签;需要记住一些比例参数,上手较难;原理艰深,兼容性不稳定等。但是在我看来,这个方法不足够好!本文将提供两种更为新颖的方法,代码简洁,原理简单,上手容易,兼容性强,出错率低的方法。inline-block裸标签对齐法,以及透明图片拉伸对齐法。 css是如此的精深,我相信后来人会有更加绝妙的方法。但是,本文提供的几种实现图片垂直居中方法,一定是目前最实用的几种方法。
全栈程序员站长
2022/11/17
3.8K0
div内图片和文字水平垂直居中「建议收藏」
【CSS】vertical-align 垂直对齐 ( 块级元素对齐 | 行内元素 / 行内块元素对齐 | 基线对齐 | 垂直居中 | 顶部对齐 | 底部对齐 )
vertical-align 垂直对齐 , 不能用于块级元素 , 只能用于 行内元素 / 行内块元素 ;
韩曙亮
2023/04/24
3.8K0
【CSS】vertical-align 垂直对齐 ( 块级元素对齐 | 行内元素 / 行内块元素对齐 | 基线对齐 | 垂直居中 | 顶部对齐 | 底部对齐 )
css的div垂直居中的方法,百分比div垂直居中
我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下。
Dawnzhang
2019/02/27
2.8K0
DIV元素水平和垂直居中
在前端开发过程中,经常要对元素进行居中设置。一般有水平居中,和垂直居中。一般设置水平居中简单。基本是margin:0 auto,就可以了。但是垂直居中,我们有时会觉得使用vertical-align,但是这个属性对div元素不起作用。 目前通用的解决办法是,使用绝对定位,然后设置left和top为50%。然后通过margin来设置。下面具体代码演示了一个简单的登录页面,然后使登录界面水平居中和垂直居中。代码如下: <html> <head> <title>div元素水平和垂直居中</
八哥
2018/01/18
2.8K0
DIV元素水平和垂直居中
水平/垂直都居中的div
用css样式使div水平/垂直居中,兼容于目前各种主流浏览器 思路: 用绝对定位将div左顶点,定位于浏览器正中心,然后再利用负的margin,将div强迫向上移动div高度一半,向左移动div宽度一半 <style> html,body{padding:0;margin:0;} #container {  position:absolute;  left:50%;  width:400px;  height:200px;  margin-left:-200px;  top:50%
菩提树下的杨过
2018/01/22
1.7K0
html中的div span和frameset框架标签
Div和span 1.      div独占一层,由div九不允许有别的。 2.      span标签不是独自占用一行,span一般用来设置字体。 框架标签: 什么是框架标签,就是把一个页面分成很多
码农阿宇
2018/04/18
3.5K0
html中的div span和frameset框架标签
div在div中垂直居中水平居中(css如何让div水平居中)
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法
全栈程序员站长
2022/08/01
15.3K0
div在div中垂直居中水平居中(css如何让div水平居中)
div盒子水平垂直居中方法
这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)  必须加上
Daotin
2018/08/31
2K0
无固定高度的div垂直居中
1、无固定高度的div垂直居中 – CSS 实现效果图如下: 代码附上: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes">
White feathe
2021/12/08
3.2K0
无固定高度的div垂直居中
【说站】css使用transform垂直对齐
2、translate属性可以改变元素的位置,translateX(10px)实现x坐标轴移动10个单位,如果是负值,则沿相反方向移动。
很酷的站长
2022/11/23
1.1K0
【说站】css使用transform垂直对齐
无意义”的标签div和span的区别
HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签p创建段落,h1标签创建标题等等)的,然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式,所以当样式表失效时它就没有任何的作用 它们被用来组合成一大块的HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联
用户7657330
2020/08/14
1.6K0
flex布局实现div的水平垂直居中
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/143096.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/31
1.9K0
flex布局实现div的水平垂直居中
div水平布局两边对齐
父容器div使用 position: relative;,子div使用 position:absolute;定位,注意边距问题
草帽lufei
2022/07/29
9420
div水平布局两边对齐
flex vue 垂直居中居上_flex 垂直居中、两列对齐、自适应宽[通俗易懂]
hahjdjjajdES6提供的Proxy可以让JS开发者很方便的使用代理模式,听说Vue
全栈程序员站长
2022/08/23
1.1K0
8.图片样式-CSS基础
一、图片大小 在CSS中,我们可以使用width、height属性来定义图片的大小。 1.实际开发 在实际开发中,需要使用多大的图片,就用Photoshop制作多大的图片。 (1)性能优化 不建议使用一张大图片,然后再借助width、height属性来改变大小。 因为一张大图片体积太大,会使页面加载速度变慢,这是性能优化方面的考虑。 二、图片边框 在5.边框样式-CSS基础 中,已经介绍过几乎可以对所有元素定义边框,也举出了对图片加上边框的例子,用border属性定义边框。 1.
见贤思齊
2020/10/29
2.2K0
8.图片样式-CSS基础
让div水平垂直居中的几种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。使用 CSS 实现水平居中很容易,但要实现垂直居中并不容易。而且有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的几种不同方法,以及它们各自的优缺点。
兔云小新LM
2019/07/24
2.2K0
实现div里的img图片水平垂直居中
方法一: 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。
全栈程序员站长
2022/08/22
3.2K0
实现div里的img图片水平垂直居中

相似问题

如何将div垂直居中在另一个div内?

2904

可以在<span>标签中自定义属性吗,如<span translation="hello">这样?

1460

如何将文本垂直对齐?

2281

HTML标签<div>和<span>之间有什么区别?

2308

我怎样才能使一个div内的链接填充div内的整个空间?

2315
相关问答用户
腾讯云TDP | TDP会员擅长3个领域
平安资管 | 架构师擅长4个领域
擅长3个领域
擅长5个领域
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档