在div中居中显示垂直虚线
，可以通过以下步骤实现：
- 首先，在HTML中创建一个div元素，并为其设置一个唯一的id属性，例如：
<div id="container"></div>- 在CSS中，为该div元素设置宽度、高度和边框样式，以及相对定位：
#container {
width: 200px;
height: 300px;
border: 1px dashed #000;
position: relative;
}- 接下来，创建一个伪元素(::before或::after)来生成虚线，并设置其样式：
#container::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 100%;
border-left: 1px dashed #000;
}这段代码中，通过设置left为50%和transform属性来将伪元素居中显示在div中。
- 最后，将div元素的display属性设置为flex，并使用justify-content和align-items属性来实现水平和垂直居中：
#container {
display: flex;
justify-content: center;
align-items: center;
}这样，就可以在div中居中显示垂直虚线了。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
- 产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
3回答
在div中居中显示垂直虚线
html、css、pseudo-element
在使用StyledComponents进行React时，下面的每个<div>代表一个不同样式的组件。 尝试实现这样的目标： ? 但理想情况下，我希望在progress-indicator中添加“虚线”样式，以便它位于指示器的垂直下方，并跨越wrapping-container的整个高度。class="wrapping-container">
<div class="progress-indicator&qu
浏览 112提问于2021-09-16得票数 4
回答已采纳
1回答
使用CSS在div上方显示居中的垂直虚线
html、css、flexbox
尝试在每个progress-container div上方创建一条垂直虚线，该虚线直接位于顶部的中心，并跨越整个可能的高度。我设法创建类似的东西的唯一方法是添加一个左边框，但显然这不是居中的。ced4da; overflow-y: hidden;} <divclass="wrapperDiv">
浏览 52提问于2021-09-15得票数 0
回答已采纳
3回答
如何在虚线边框内水平和垂直居中文本
html、css
我需要将一些文本在虚线边框之间垂直和水平居中，如下图所示：我有一个，它试图实现这一点。
如何修改css以使其显示为附加屏幕截图？
浏览 5提问于2012-07-25得票数 1
回答已采纳
1回答
我想让文本(两行)在这个圆圈内垂直和水平地居中，但有些地方出了问题：
我还试图在中间放置一个背景图像，但我希望它在虚线/虚线边框层下，而不是在上面。有什么建议吗？当然，它下面有一个居中的背景图像。
浏览 0提问于2018-07-19得票数 0
回答已采纳
2回答
居中排列排行榜广告
html、css、leaderboard
在上努力将排行榜广告集中对齐-在某些页面上正确地定位自己，而在其他几个页面上错误地定位，似乎是这样。已经应用了<div class="center">AD CODE</div>标记，尽管这似乎并没有起到作用……
任何建议都将不胜感激，一如既往！谢谢。
浏览 1提问于2014-06-20得票数 0
7回答
使用CSS垂直居中旋转文本
css、vertical-alignment、centering、vertical-text
我有以下HTML： <div class="inner rotate">Centered?</div>div.outer是一个窄的垂直条带。div.inner旋转90度。我想要文本“居中？”在其容器div中居中显示</em
浏览 0提问于2013-02-28得票数 84
回答已采纳
1回答
DatePicker文本垂直居中
wpf、xaml、textbox、datepicker
我在我的应用程序中使用了如下定义的DatePicker： Margin="20, 20, 20, 0"以下是日期选择器的显示方式：如何让日期(4/22/2015)在文本框中垂直居中
浏览 1提问于2015-04-02得票数 6
5回答
将文本居中放置在父元素中间
html、css
<div id="wrapper" style="height:400px;width:400px;"> Text</div>
我正在寻找一种方法
浏览 0提问于2011-10-03得票数 1
4回答
如何在另一个DIV中创建一个DIV？
css、html
我试图在div中创建div。但是我在将div居中时遇到了问题。我跟踪了目前我使用的是保证金-顶部: 20%。请建议其他垂直居中的方法。
浏览 0提问于2010-09-26得票数 2
4回答
水平填充边框
css
我想要一个没有嵌套元素的简单div在元素内显示水平虚线边框(如填充)，如下所示有一个outline-offset属性，但是它只接受一个长度值，垂直边框也会出现。在中，我看不到如何隐藏垂直边框。
浏览 15提问于2022-08-18得票数 2
回答已采纳
3回答
垂直居中元素，而不会在屏幕外变得不可访问
html、css
我试图在页面中间居中放置一个元素。我可以将其居中，但如果我垂直调整页面大小，直到视图高度小于居中元素，元素将垂直移出屏幕，而不显示滚动条。-50%); display: inline-block; height: 800px;} <div class=
浏览 1提问于2017-02-23得票数 1
2回答
Vanilla JavaScript切换函数将我的h2标签上移
javascript、html、css
问题是，一旦单击h2标记并显示隐藏的内容，它就会向上移动一点。我希望它留在原地，隐藏的内容占据下面的空间，而不是将h2标签向上移动几个像素。 }
display: none; margin-bottom: 1em; <main> <div class="contents">
<
浏览 22提问于2021-01-12得票数 0
回答已采纳
2回答
圆圈内的文本未对齐html css
html、css
我正在尝试将文本放入一个圆圈中。我正在努力使文本正确对齐(圆圈的中间)。height: 110px;color: rgb(255, 255, 255);}<td colSpan=2> <divclass="circle"> Discuss <br> ideas and <br> projects </div> </td>
浏览 4提问于2016-10-02得票数 0
3回答
使用flex layout - angular material 2将div居中到页面
angular、flexbox、angular-material、angular-flex-layout
我想在页面中央显示一张卡片。当我将类progress-wizard放在一个单独的div中时，如下所示。<div class="progress-wizard" > <mat-card><button mat-raised-button color="primary">
浏览 51提问于2017-10-21得票数 3
1回答
在div中垂直居中显示文本
html、css、twitter-bootstrap-3
我在div(bootstrap中的class row )中有一个段落，我想将段落中的文本垂直居中，但我似乎无法做到it.Here是我的代码和jsfiddle……<div id="footer" class="row">
<p id="text" >TEXT<&#x
浏览 2提问于2014-06-04得票数 0
1回答
Android - CSS垂直居中不起作用
android、css、alignment、center
以下容器应垂直居中...<div style=" top:0; margin:auto; width: 50px; z-index:555;...and除了安卓之外，所有主流浏览器都支持它。有没有办法在Android中也垂直居中
浏览 0提问于2013-03-11得票数 0
回答已采纳
如何在网页的其他内容上显示div？此div必须垂直和水平居中，如下例所示：我试过这个：在本例中，只有左角居中，而不是div本身。
浏览 4提问于2011-07-15得票数 6
回答已采纳
1回答
显示:表格单元格；在ie6/7中解决办法
html、css、vertical-alignment、css-tables
我正在尝试构建一个包含多个单元格的单行css表，这些单元格的文本在单元格中垂直居中。"20%">text</td> <td width="20%">text</td></table>
为了使我的代码在语义上是正确的<<
浏览 0提问于2010-09-17得票数 0
1回答
崩溃的Flexbox之谜
html、css、flexbox
我将body标记设置为flexbox，如下所示：flex-direction: column;中间的site-content div是flex-grow这工作得很好，并给出了这个布局(虚线框是用来模拟在屏幕的可见区域上显示的内容。页面按其应有的方式滚动)。
我的问题出现是因为我想在某些页面的这个site-content div中添加一个垂直/水平居中的方框。因此，我为这个框创建了一个div
浏览 1提问于2016-10-23得票数 5
1回答
如何使Bootstrap Modal在div中居中，而不是在屏幕中？
html、css、twitter-bootstrap
我正在看这个页面- https://getbootstrap.com/docs/5.0/components/modal/ 此示例显示了垂直居中模式。 <!-- Vertically centered modal --> ...</div> 默认情况下，它也是水平
浏览 25提问于2021-08-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
