腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
1
回答
将图像与文本对齐
html
、
css
、
vertical-alignment
我在将图像与文本对齐时遇到问题。我希望我的图像在左边,文本在右边,垂直居中到图像。 <div class="container"> <span class="icon"> <img ... /> </span> <span>555-1212</span> </div> 现在,文本紧挨着容器的顶部。我如何将它垂直居中到容器的中间?
浏览 0
提问于2014-09-11
得票数 3
2
回答
垂直对齐不起作用
html
、
css
下面是正在发生的事情 我希望将右侧的箭头垂直对齐,使其位于div的中心。下面是html: <div class="title-block" > <span class="date">{{ order.getCreated()|date('M d, Y') }}</span> <span class="invoice">Invoice #{{ order.getInvoice().getInvoiceNumber()}}</span> &l
浏览 2
提问于2013-04-15
得票数 0
回答已采纳
1
回答
在div中创建div居中的文本内容
css
我的HTML中有一个div,如下所示: <div id="audio"><span>فایل های صوتی</span></div> 这两个元素的CSS如下所示: #audio{ width: 100%; height: 11%; background-color: #3F1954; } span{ font-size: 20px; color: white; text-align: center; font-family: btitr; } 我希望跨度在div中居中(水平和垂直),当我放大或缩小我的页面时,它
浏览 2
提问于2014-10-02
得票数 2
1
回答
行高不会垂直居中内联块
html
、
css
我尝试将一个内联块垂直居中,如下所示: div { width: 50px; height: 50px; background: red; line-height: 50px; } span { display: inline-block; width: 20px; height: 20px; background: white; } <div> <span></span> </div> 但是跨度不是垂直居中的。为什么?
浏览 8
提问于2016-09-22
得票数 1
2
回答
在段落中垂直居中跨度
css
、
centering
、
vertical-alignment
我有这样的东西: <p style="text-align:center;background-color:yellow;"><span style="vertical-align:middle;">My text goes here...</span></p> 显然,正如您在这里看到的,我的意图是将跨度居中(水平和垂直)。文本水平居中很好,但是为什么垂直居中不起作用呢?这是怎么回事? 谢谢
浏览 2
提问于2012-03-16
得票数 3
回答已采纳
2
回答
关于span和div,可以不垂直吗?
html
、
css
、
web
图片1 span和div不能垂直居中。如果我将文本添加到div,span和div是居中垂直的。比如图2。为什么? .bc { background-color:red; display:inline-block; height:30px; line-height:30px; width:400px; } .tips { height:30px; line-height:30px; } <span class="tips">SO</span><div class="
浏览 22
提问于2017-06-20
得票数 0
回答已采纳
4
回答
垂直对齐:居中不起作用
html
、
css
css属性vertical-align: middle在本例中不起作用。 HTML: <div> <span class='twoline'>Two line text</span> <span class='float'> Float right </span> </div> CSS: .float { float: right; } .twoline { width: 50px; display: inline-block; } div {
浏览 2
提问于2011-11-01
得票数 48
回答已采纳
5
回答
如何在div内垂直对齐文本和图像?
html
、
css
这就是我想做的: 使图标垂直在div内居中,文本垂直居中! 我试过这个: <div id="mainDiv"> <div id="top"> <span><img src="path/img.png" class="myImage" /></span> <span>My Title</span> </div> </div> 和css: #mainDiv { width:10
浏览 8
提问于2016-02-23
得票数 0
回答已采纳
2
回答
与其他元素一起垂直中心跨度(引导标签)
css
、
html
、
twitter-bootstrap
、
vertical-alignment
我想使用bootstrap css框架的内联标签: <span class="label">Default</span> 不幸的是,当与其他元素一起使用时,这些标签不会垂直居中。 <p> <span class="label"><a href="#">test</a></span>This is a test heading. </p> 请查看完整的代码以获取可视化示例: 我知道行高和绝对/相对定位的变通方法,但不能正确地应用它们。 如何将这些标签
浏览 1
提问于2012-02-17
得票数 5
回答已采纳
1
回答
HTML:水平和垂直地居中div的内容?
html
、
css
我读了很多东西想试一试,但还是做不到。我有一个div和一些内容,我希望内容是垂直的和水平的中心。当我做下面的操作时,它们垂直地居中,但向左是对的。如果我移除display: table-cell,它们水平地居中,但对顶部是对的。 <div class='contents'> <span>a span</span><br> <span>b span</span><br> <span>c span</span> </div> .contents {
浏览 3
提问于2015-06-16
得票数 0
回答已采纳
2
回答
跨度和锚点默认高度
css
你能告诉我为什么<a>的span元素有不同的高度吗? 为什么<a>垂直居中对齐,span占用所有垂直可用空间?
浏览 1
提问于2012-06-21
得票数 1
回答已采纳
3
回答
使跨度和图像在div内垂直居中
html
、
css
如何在这里将跨度和图像垂直居中? <div id="foo"> <span>Im great</span> <image src=""> </div> div { height:350px; background:yellow; } div span{ line-height: 350px; background: red; } 当我删除图像时,跨度是居中的,但如果我添加图像,跨度不是居中的,任何more..why?
浏览 1
提问于2013-01-28
得票数 0
4
回答
如何使不同大小的字体在html跨度中垂直居中?
html
、
css
、
vertical-alignment
我在做一个俯仰控制器: <div id="pitchWrapper"> <span id="pitchButtons">-</span> <span id="pitchValue">0</span> <span id="pitchButtons">+</span> </div> 我希望减号,正号和音调值都垂直居中。我希望加号和减号是比音调值更大的字体大小。 当我将字体大小都设置为相同时,它工作得相当好。 ? ...
浏览 167
提问于2020-06-01
得票数 0
回答已采纳
2
回答
具有间距、等高、垂直和水平居中项目的flexbox
html
、
css
、
flexbox
我正在尝试建立一个具有以下想法的flexbox菜单:项目之间的空间,等高,居中的文本(水平和垂直)。 ul { display: flex; justify-content: space-between; flex-direction: row; justify-content: center; } li { width: 32.25%; align-items: center; } span { text-align: center; display: block; height: 100%; } <ul> <li>&l
浏览 3
提问于2017-02-17
得票数 0
1
回答
React bootstrap垂直居中
reactjs
、
react-bootstrap
、
centering
我想使用react-bootstrap将我的表单垂直居中和水平居中。 React代码: <Container> <Row > <Col md={{ span: 4, offset: 4 }}> <Form onSubmit={(e) => loginHandler(e)}> <Form.Group controlId='formGroupEmail'> <Form.Label>Kullanıcı Adı veya Email Adres
浏览 16
提问于2020-11-17
得票数 1
4
回答
中心img内跨
html
、
css
我试着在跨度内对一个图像进行居中。但不起作用。 下面是我的代码的链接: <div> <label> <span>left span that can have more than one line</span> <span><img class="redcross" /></span> </label> </div> 类“红十字”是我想要垂直居中的 有人能帮我吗?
浏览 3
提问于2015-12-04
得票数 1
回答已采纳
1
回答
CSS线-高度不影响浮动:正确的元素
html
、
css
、
twitter-bootstrap
我有两个正试图垂直居中的span元素,我设法通过将行高与父元素的高度相匹配来对左元素进行居中,但是右边的元素具有浮动的风格:右不受行高变化的影响,这有什么原因吗?我如何垂直对浮动元素进行居中呢? HTML <div class='panel panel-default remove-radius slideshow-holder'> <span id='slideshow_prev_button' class='glyphicon glyphicon-chevron-left'></span>
浏览 0
提问于2015-02-22
得票数 2
回答已采纳
3
回答
CSS :如何在div中将文本垂直居中对齐?(或不是表的任何其他元素)
css
、
html
、
center-align
为了在表单元格中垂直居中对齐文本,我在td中使用了vertical-align: middle。 但上述方法不适用于div、span、header和其他非table元素。那么,如何在这样的元素中垂直居中对齐文本呢?
浏览 13
提问于2009-08-25
得票数 1
回答已采纳
4
回答
如何跨浏览器将标记垂直居中
html
、
css
我在让一段html垂直居中时遇到了很大的麻烦。代码如下。超链接中的内容需要垂直对齐,但我不知道如何对齐。有什么需要帮忙的吗?!非常感谢 <a class="x" href="#"> <span class="time">xxxx</span> <span class="time">yyyy</span> <span class="time">zzzz</span> <table>
浏览 3
提问于2012-07-12
得票数 2
4
回答
居中文本不工作
html
、
css
、
flexbox
我有一个带文本的span和一个包装它的div。我正在尝试在span中居中显示文本。我尝试使用flexbox将其居中,但它不起作用。它是水平居中的,而不是垂直居中的。我做错了什么,我如何才能纠正它? ( span存在的唯一原因,是为了让我可以将文本居中。如果我可以在不使用span的情况下将文本居中,那么我就不会使用它。) JSFiddle #headerScrollDown { font-size: 85px; font-family: monospace; border: 2px solid black; border-radius: 50%; width:
浏览 64
提问于2016-09-02
得票数 0
回答已采纳
3
回答
如何在相对定位的容器内将图像垂直居中?
html
、
css
、
positioning
、
centering
我想在下面的超文本标记语言中垂直居中图像,这样它就垂直居中到它旁边的div ("rtUpdateContentDiv")。img和div都在父容器"rtUpdateContainerDivActive“中。 <div class="rtUpdateContainerDivActive"> <img class="statusImg" src="images/icons/Knob-Valid-Green.png"> <div class="rtUpdateConten
浏览 2
提问于2012-09-14
得票数 1
回答已采纳
1
回答
在拆分框和兄弟框中垂直地居中文本
html
、
css
如何在不使用表的情况下使用以下代码中仅使用CSS2.1的父框“#容器”垂直对文本“One”进行居中?文本'2.1‘和文本'2.2’也需要在绿色框中垂直居中。 <div id="container"> <div id="col-1"> One </div> <div id="col-2"> <span>2.1</span>
浏览 3
提问于2015-02-16
得票数 4
回答已采纳
3
回答
文本垂直居中的两列
html
、
css
我需要两栏: 左边的按钮 右边的名单 它们都需要在包装器div的中间垂直居中。到目前为止,我得到了这个: 我使用这段代码垂直对包装器内的内联块进行居中: .wrapper { /* let it fill the whole container */ position: absolute; top: 0; bottom: 0; left: 5px; right: 5px; } .wrapper:before { content: ''; display: inline-block; vertical-align: mid
浏览 7
提问于2016-02-10
得票数 2
回答已采纳
1
回答
如何垂直对齐下拉列表?
html
、
css
如何垂直居中文本和下拉列表,以使它们是水平的? <p> <span>Hello World</span><select><option>Hello</option></select> </p> span { font-size: 50px; }
浏览 3
提问于2015-04-20
得票数 2
回答已采纳
1
回答
在div中居中对齐锚点文本
html
、
css
我对此进行了搜索,但没有找到解决方案。我有一个带文本的锚。 锚的高度和宽度是由JS设置的DOM加载,我需要在锚内的文本垂直和水平居中。 遵循了许多关于居中元素的教程。它们都不起作用。 这是我的html <a href="#" class="wpsc_category_grid_item" title="Category1"> <span>Category1</span> </a> 和我的CSS .wpsc_category_grid_item { background: #000;
浏览 0
提问于2012-08-28
得票数 1
回答已采纳
4
回答
如何使文本居中显示大于容器大小?
html
、
css
代码如下: #add_cal_in { width: 30px; height: 30px; line-height: 30px; font-size: 50px; text-align: center; background-color: #f38268; display: inline-block; vertical-align: top; cursor: pointer; color: #fff; margin-left: 5px; } <span id="add_cal_in
浏览 0
提问于2017-03-14
得票数 4
2
回答
跨度内的垂直对齐不适用于特殊字符
html
、
css
我正在尝试垂直对齐文本,但星号没有对齐,如何将它们垂直居中对齐? .operators { margin: 0; padding: 0; list-style: none; } .operators > li { display: inline-block; } .operators > li span{ font-size: 18px; display: flex; padding: 4px 8px; justify-content: center; align-items: center; color: #ffffff; bac
浏览 30
提问于2021-05-10
得票数 0
回答已采纳
6
回答
垂直居中div中的元素
html
、
css
、
flexbox
我想让我的div1内部元素垂直居中。 正如您在我的div1 display中看到的,如果我使用display: table-cell,它会垂直对齐元素,但元素会移到顶部,而不是居中。 但是如果我使用display: flex,它会保持元素居中,但元素是水平对齐的。 .div1 { height: 200px; width: 100px; background: white; position: absolute; display: flex; align-items: center; justify-content: center; vertical-al
浏览 65
提问于2017-02-22
得票数 1
回答已采纳
2
回答
li中跨度的居中背景图像,文本居中并在底部垂直对齐
html
、
css
、
css-sprites
、
centering
我只想使用CSS而不是表格来重新创建它 代码将类似于以下代码 <ul> <li> <span class="icon-class icon-name"></span> <span class="text">Text</span> </li> //more li's </ul> icon-class设置图像、显示块、宽度和高度,icon-name设置位置li向左浮动,列表样式无 我所有的CSS都很好,除了居中对齐图标;垂直对齐文本到底部和居中对齐文本
浏览 1
提问于2011-10-14
得票数 1
回答已采纳
2
回答
输入号码,不能垂直居中。
html
、
css
在内容区域垂直居中数字输入框。 input { vertical-align:middle } <p> <span> <input type="number" id="number" value="8" min="1" max="20"> 密码位数 </span> </p> To no avail
浏览 2
提问于2022-12-03
得票数 -1
回答已采纳
2
回答
css线条高度在移动设备上不起作用
ios
、
css
、
mobile
、
vertical-alignment
我尝试在我的hyprid应用程序(ionic)中使用line-height将一些项目垂直居中对齐 我基本上是怎么做的: .wrapper { height: 35px; } .item { background: lightgreen; float: left; height: 100%; } .item span { line-height:35px; } <div class="wrapper"> <div class="item"> <span class
浏览 4
提问于2015-09-11
得票数 1
2
回答
如何在列中垂直居中文本(bootstrap 4)?
bootstrap-4
、
twitter-bootstrap-4
如何在列中垂直居中文本(bootstrap 4)?结构是基本的,请参见: <div class="row"> <div class="col-md-6"> <span>Text to center</span> </div </div> 伙计们!
浏览 0
提问于2017-01-25
得票数 26
回答已采纳
1
回答
Navbar-具有两行文本的品牌,垂直居中
css
、
twitter-bootstrap
、
navbar
我有一个Bootstrap导航栏,带有navbar-brand中的文本。 我想要在两行文本中显示navbar-brand,并且两行文本都垂直居中,但我只实现了第一行垂直居中,而不是两行都实现... 下面是一个小提琴 <header> <nav class='navbar navbar-default navbar-fixed-top' role='navigation'> <div class='container-fluid'> <div class=&
浏览 1
提问于2015-06-17
得票数 0
3
回答
需要水平和垂直居中对齐图像和文本
html
、
css
我可以将它们分别垂直和水平居中对齐,但我需要它们都作为一个单元水平居中,文本在图像旁边垂直居中。 这就是我所拥有的: <div style="text-align: center; height: 50px; position: relative; border: 1px solid black;"> <img src="img/image.jpg"><span style="margin-left: 150px; position: absolute; top: 50%; left: 50%; -ms-transf
浏览 4
提问于2018-08-10
得票数 0
回答已采纳
2
回答
如何使漂亮的图标居中并跨度
css
、
font-awesome
、
vertical-alignment
我有这个标记。我需要将相邻的<i>和<span>居中对齐(水平和垂直)。请指点一下。 <span (click)="onGoBackClick($event)" class="cursor-click"> <i class="fa fa-arrow-circle-left fa-2x"></i> <span>Go back to previous page</span> </span>
浏览 16
提问于2019-05-01
得票数 0
回答已采纳
2
回答
使字形图标垂直居中
twitter-bootstrap-3
如何在此上下文中垂直居中glyphicon (和badge)元素: <ul class="list-group"> <li class="list-group-item"> Multi-line content... <span class="glyphicon glyphicon-chevron-right pull-right"/> </li> <li class="list-group-item">
浏览 3
提问于2013-11-21
得票数 8
4
回答
如何对齐相邻的两种不同字体大小?
html
、
css
如何对齐相邻的两种不同大小的字体,使较小的文本与较大的文本垂直居中? HTML: <div id="parent"> <span id="first">first</span> <span id="second">second</span> </div> CSS: #first { font-size: 200%; } #second { font-size: 100%; } JSFiddle:
浏览 11
提问于2012-01-24
得票数 1
回答已采纳
3
回答
导航中间的徽标-如何垂直居中
html
、
css
、
navigation
、
html-lists
我正在尝试创建一个标题/导航栏,在那里将有一个标志的两边都有导航选项,我希望所有这些都垂直居中。为了实现这一点,我使用了<li>和<li class>元素,但我在垂直居中方面运气不佳。有什么想法吗? HTML <header> <nav> <ul> <li class="btn"><a href="#"><span>01</span>Home</a></li>
浏览 4
提问于2012-12-20
得票数 0
回答已采纳
1
回答
使用Flex将四个按钮置于div的中心位置
html
、
css
、
flexbox
我需要居中水平和垂直4个按钮使用Flex。我有两个cols。每列有两个按钮。我想把按钮水平和垂直居中。我试过next,但按钮没有垂直居中。 ? 风格 <style type="text/css"> .flexbox-container { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: cent
浏览 19
提问于2019-04-14
得票数 0
回答已采纳
3
回答
Litsgroupitem,文本垂直居中,按钮在右侧
html
、
css
、
twitter-bootstrap
我有一个列表组,我想在其中显示一些元素,这些元素可以通过页面内的另一个组件动态添加。我需要的是按钮,在那里用户可以删除这样的元素。按钮应该靠右对齐。 所以这就是我现在想出来的: <ul class="list-group"> <li class="list-group-item"> <span>Item to delete</span> <button type="button" class="btn btn-outline-danger pul
浏览 1
提问于2017-09-20
得票数 0
2
回答
CSS scale()在Android Chrome 70和其他版本上不起作用
android
、
css
我想在价签前显示一个彩色的小圆点。点应该在价格旁边垂直居中,并放大一点。 这适用于chrome桌面、iOS、Safari和其他浏览器。 ? 但在Android上,这个圆点很大,占据了整个div的空间。 ? .item.green::before { content: "●"; color: #7ED321; } .item { transform: scale(1.4); display: inline-block; vertical-align: text-top; } .priceText { bottom: 20px; }
浏览 89
提问于2019-04-27
得票数 0
回答已采纳
2
回答
为什么内联块不能垂直对齐
css
我是CSS显示的新手,目前我想居中对齐一些文本和图标(垂直),但它就是不起作用: .header { display: inline-block; height: 30px; width: 200px; background-color: #1f78b4; } .holder { width:auto; height: 30px; background-color: lightblue; float:right; line-height: 30px; } .menuitem { display: inline-block; line-height: 30px; } .source { he
浏览 2
提问于2016-03-04
得票数 0
3
回答
如何在安莉元素中将图像+文本居中
html
、
css
基本上我有一个li元素,它包含一个小图标和一个文本,我想把这些元素放在一起水平和垂直居中。然而,我没有得到它的工作,因为我在CSS没有真正的经验。 我已经设法使用两个跨度和行高将元素垂直居中。但我在水平居中时失败了,因为文本对齐不适用于跨度,浮动中间也不存在。 你们有什么想法吗?? 下面是我的代码: HTML: echo "<li style=\"background-color:#f7f7f7; color:#2EA620;\"><span class=\"image\"><img src=\"Images/Lis
浏览 0
提问于2013-01-30
得票数 0
回答已采纳
2
回答
中间居中的文本内联
css
如何在较大的文本之后垂直地居中小文本?我不想依赖某个固定的高度。有可能吗? HTML: <div> <span class="big">Big</span> <span class="small">Small</span> </div> CSS: .big { font-size: 50px; } .small { font-size: 20px; } 结果: 预期结果:
浏览 4
提问于2015-08-31
得票数 1
回答已采纳
3
回答
垂直对齐图像和两行文本
html
、
css
、
vertical-alignment
我在这里读了很多文章,很多帖子,但不幸的是,我不能垂直地对2行文字和一张图片。 <a class="button" href=""> <img src="http://dummyimage.com/30x30/cf97cf/fff"> Button <span>Button alt</span> </a> 我希望在图像旁边的2行(居中),并将整个内容垂直在.button中居中。 body { padding: 20px; } .button {
浏览 7
提问于2015-08-17
得票数 4
回答已采纳
1
回答
为什么display:flex display:auto不能垂直居中
html
、
css
、
flexbox
我几乎看过这里的每一篇类似的帖子,但都搞不清楚。为什么我的窗体只是水平居中,而不是垂直居中? HTML <body> <div class="container"> <form> <div class="profilePic"> <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" alt="
浏览 4
提问于2021-04-15
得票数 0
2
回答
如何在<i>标记中垂直对齐<button>标记?
html
、
css
我有这样的按钮标签: <button id="submit" style="height: 30px;"> <i id="loginLoadIcon" class="spinnerIcon"></i> <span>Log in</span> </button> 它使用这样的css: .spinnerIcon { width: 25px; height: 25px; background: transparent url(
浏览 7
提问于2013-12-16
得票数 0
回答已采纳
1
回答
使文本在元素中水平和垂直居中
html
、
css
、
twitter-bootstrap
我试图在我的# some元素中将一些文本在垂直和水平方向居中: #modal { background: gray; color: white; white-space: nowrap; width: 427px; height: 999px; } <div id="modal"> <span>CENTRE THIS</span> </div>
浏览 0
提问于2015-02-04
得票数 1
2
回答
标题内垂直对齐Bootstrap徽章
css
、
twitter-bootstrap
、
twitter-bootstrap-3
、
bootstrap-4
当我在标题中使用Bootstrap badge时,例如h1,h2,h3,垂直对齐是关闭的。badge与标题文本的底部对齐。我希望徽章与标题文本垂直居中对齐。 HTML <h1><span class="badge">badge</span> Heading 1</h1> <hr> <h2><span class="badge">badge</span> Heading 2</h2> <hr> <h3><span class=&
浏览 69
提问于2013-10-18
得票数 32
回答已采纳
1
回答
HTML & CSS: inline-block中的inline元素垂直居中
html
、
css
我已经阅读了大约20个关于HTML/CSS中垂直对齐/居中的问题和文章,但我仍然无法让我的特定案例发挥预期的作用。 请看一下 <div class="outer"> <div>Left1</div> <div>Left2</div> </div> <div class="inner"> <a href="#">Before</a> <span>Middle</span> <a href=
浏览 2
提问于2013-03-30
得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
CSS—总结常用垂直居中方法
最全的实现垂直居中的方法
CSS布局之垂直居中一
让div水平垂直居中的几种方法
CSS水平和垂直居中技巧大梳理
热门
标签
更多标签
活动推荐
运营活动
广告
关闭
领券