腾讯云

开发者社区

文档建议反馈控制台

首页

文章/答案/技术大牛

发布

社区首页 >问答首页 >垂直居中的Flexbox/Bootstrap列中可选的span文本后缀

问垂直居中的Flexbox/Bootstrap列中可选的span文本后缀
EN

Stack Overflow用户

提问于 2021-03-09 03:30:27

回答 1查看 102关注 0票数 1

我想在垂直居中的柔性盒/引导列中显示一个可选的文本后缀。它只应该显示在小屏幕上。下面的代码可以工作，但只有当我在span元素上使用"display:contents“时才能工作，而span元素没有完美的浏览器支持。如果删除"display:contents"，文本后缀将显示为另一列。如何在不使用display:contents的情况下，使文本后缀与前面的文本流？

<div class="row">
   <div class="col-2">
      <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="100" height="300">
   </div> 
   <div class="col d-flex align-items-center">
        Title text Title Text 
        <span class="d-lg-none" style="display:contents">
           (Optional column is here on small devices)
        </span>
   </div>
   <div class="col-2 d-none d-lg-flex align-items-center">
      Optional column
   </div>
</div>

https://jsfiddle.net/9z81tvsx/

css

bootstrap-4

flexbox

腾讯云会员中心

加入腾讯云会员，每月可领会员专属优惠券；会员云产品免费体验；云产品会员专享价；会员签到抽奖…

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-09 05:24:42

d-flex是display:flex;

元素使用流布局(块和内联布局)来布局其内容。

如果它的外部显示类型是内联或运行的，并且它正在参与块或内联格式设置上下文，那么它将生成一个内联框。否则，它将生成一个块容器框。https://developer.mozilla.org

您正在它的父级上使用.d-flex。因此，span.d-lg-none在小屏幕上有display:block。因此，它的行为就像一个列。

您可以通过在段落元素中包装文本来解决这个问题。

<p>Title text Title Text <span class="d-lg-none" >(Optional column is here on small devices)</span></p>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66546071

复制

flex vue 垂直居中居上_flex 垂直居中、两列对齐、自适应宽[通俗易懂]

https java 网络安全

hahjdjjajdES6提供的Proxy可以让JS开发者很方便的使用代理模式，听说Vue

全栈程序员站长

2022/08/23

1.1K0

bootstrap 模态框垂直居中实现方法原

bootstrap

(adsbygoogle = window.adsbygoogle || []).push({});

tianyawhl

2019/04/04

1.2K0

div垂直居中的几种方式_div垂直水平居中

css html

利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。

全栈程序员站长

2022/08/03

4.1K0

HTML 水平居中垂直居中垂直水平居中的几种实现方式「建议收藏」

html auto flex inline translate

大家好，我是架构君，一个会写代码吟诗的架构师。今天说一说HTML 水平居中垂直居中垂直水平居中的几种实现方式「建议收藏」,希望能够帮助大家进步!!!

Java架构师必看

2022/05/22

5.3K0

Android 浏览器文本垂直居中问题

渲染 css html android

在开发中，我们常使用 line-height 属性来实现文本的垂直居中，但是在安卓浏览器渲染中有一个常见的问题，就是对于小于12px的字体使用 line-height 属性进行垂直居中的时候，渲染出来的效果并不是文字垂直居中，而是会偏上一些。举两个代码示例如下：

IMWeb前端团队

2019/12/04

9760

不确定行数的多行文本垂直水平居中的css

css

ul li { position:relative; display: table; width:3rem; height:3rem; background:url('image/defaultBg.jpg') 0 0/100% 100% no-repeat; float:left; margin-bottom:0.2rem; text-al

蓓蕾心晴

2018/04/12

1.4K0

VB的TextBox文本框实现垂直居中显示的方法

alias function private

Form_Load()窗体代码中的多行属性设置必须为真，即Text1.MultiLine = True，该属性为只读属性，请在设计时修改，换行会被之后的代码屏蔽，不想屏蔽可自行修改，调用此函数就好了。

大师级码师

2022/11/06

2.9K0

Android 浏览器文本垂直居中问题

android

本文介绍了在Android浏览器上实现文本垂直居中的问题，并提供了两个解决方案：改变字体大小和用表格布局。通过测试，发现改变字体大小的方法并没有达到真正的垂直居中，而使用表格布局的方法则可以较好地实现文本垂直居中。

IMWeb前端团队

2017/12/29

1.7K0

【前端攻略】最全面的水平垂直居中方案与flexbox布局

容器 css

最近又遇到许多垂直居中的问题，这是Css布局当中十分常见的一个问题，诸如定长定宽或不定长宽的各类容器的垂直居中，其实都有很多种解决方案。而且在Css3的flexbox出现之后，解决各类居中问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够详尽，故想借介绍flexbox的同时好好总结一番各类垂直居中的方法。由简至繁：行内元素的水平居中要实现行内元素（<span>、<a>等）的水平居中，只需把行内元素包裹在块级父层元素（<div>、<li>、<p>等）中，并且在父层元素CSS设置如

Sb_Coco

2018/05/28

1.4K0

元素垂直居中和水平居中的方法

其他

前言元素居中一直是css布局中常见的问题正文水平居中内联元素只需把内联元素包裹在块状父元素中，并在父元素css上设置：text-align:center; 此方法适用于文字、链接块级元素宽度一定的块级元素：只需设置左右外边距为auto，即：margin:0 auto; 多个块级元素将要水平排列的块级元素设置display:inline-block;然后在父元素上设置text-align:center; 效果和内联元素水平居中一样 Flex布局在父元素上设置：display:flex;jus

pitaojin

2018/05/24

1.8K0

元素的垂直居中的方法

其他

单行文本的垂直居中只需让元素的行高的值设置成和高度的值一样即可。如 height: 30px; line-height: 30px; 高度不固定的元素的垂直居中使用 Flex 父元素加 display: flex; align-items: center; 然后就搞定了，很简单吧。使用 table 布局父元素加 display: table; /*让元素以表格形式渲染*/ height: 200px; /* 需要定宽，定高 */ width: 100px; 子元素加 display: table-

前端GoGoGo

2018/08/27

4760

css垂直居中怎么设置?文字上下居中和图片垂直居中

css

　　css 居中分css垂直居中和css水平居中，水平居中平时比较常用，这里我们主要讲css上下居中的问题。垂直居中又分为css文字上下居中和css图片垂直居中，下面我们就分别来介绍一下。 css文字上下居中：一、单行内容的居中。只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了。css代码为{height: 4em;line-height: 4em;overflow: hidden;}

ytkah

2018/03/06

7.6K0

水平居中和垂直居中

html

本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</title> <meta charset="utf-8"> </head> <style type="text/css"> .box { /* 在一个基础的盒子里面显示效果 */ position: relative; float: left; width: 250px; h

echobingo

2018/04/25

2.7K0

垂直方向上下居中_如何实现垂直居中

https java css 网络安全

这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上

全栈程序员站长

2022/09/19

1.7K0

垂直水平居中

javascript

2.绝对定位计算:对子元素使用绝对定位，并分别移动上左50%，再分别margin-top:-50%height px,margin-left:-50%width px;

菜的黑人牙膏

2019/01/21

1.6K0

Css 垂直居中

javascript

在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用 text-align:center; 如果它是一个块级元素，就对它自身应用 margin:auto。然而如果要对一个元素进行垂直居中，可能光是想想就令人头皮发麻了。

grain先森

2019/03/29

2.8K0

css的div垂直居中的方法，百分比div垂直居中

css html http

我们都知道，固定高宽的div在网页中垂直居中很简单，相信大家也很容易的写出来，但是不是固定高宽的div如何垂直居中呢？我们在网页布局，特别是手机等web端网页经常是不固定高宽的div，那么这些div如何垂直居中呢？这篇文章，我总结一下。

Dawnzhang

2019/02/27

2.7K0

内容垂直居中

腾讯云测试服务 css html

测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容

GhostZhang

2022/08/21

9950

CSS垂直居中

css

方案1 关键代码父类： display: table-cell; vertical-align: middle; 示例： <style> .parent { width: 200px; height: 600px; background-color: blueviolet; display: table-cell; vertical-align: middle;

乐心湖

2020/07/31

3.4K0

垂直居中原

fixed height position transform window

垂直居中的方法很多，一般是设置line-height,display:table-cell,vertical-align:middle，或者transform:translate(0,-50%),最近看到也可以使用另一种方法实现垂直居中

tianyawhl

2019/04/04

9260

相似问题

Bootstrap下拉文本垂直居中

如何在列中垂直居中文本(bootstrap 4)？

Flexbox没有垂直居中

文本垂直居中粘滞的BootStrap页脚

462

Bootstrap span的居中错误

活动推荐

体验智能媒资降冷，云点播优惠不要错过！

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例