我需要垂直和水平居中文本.有没有一种简单的方法来执行以下代码?
<div style="display: block; height: 25px;">
<span id="ctl_txt" style="background-color: rgb(255, 0, 0);">
Basic
</span>
</div>
Run Code Online (Sandbox Code Playgroud) 我试图以高度为中心div,但是当我调整浏览器屏幕大小时它不起作用.
如何编辑它以在调整大小时实现可调节的margin-top?
谢谢
<script>
var h = $(window).height();
var parentHeight = h;
var childHeight = $('#a-middle').height();
$('#a-middle').css('margin-top', (parentHeight - childHeight) /2);
</script>
Run Code Online (Sandbox Code Playgroud)
编辑: 答案应该是js,因为flexbox不能在IE-9上运行
我想在页面的中心显示一个div,而不必为元素定义一个设置的高度,以便高度动态地适合页面的内容.这可能吗?我愿意使用JS/jQuery解决方案,只要它们具有优雅的回退,但我更喜欢纯CSS解决方案.
这是我当前的代码,它将以div为中心,但我必须包含一个高度.
HTML
<div class="card">Lorem ipsum dolor sit amet, minim molestie argumentum est at,
pri legere torquatos instructior ex. Vis id odio atomorum oportere, quem modo fabellas sit
at, dicat semper est ne. Apeirian detraxit pri eu. No solum accusam has. Ius ne harum mundi
clita, eu pro tation audiam.
</div>
Run Code Online (Sandbox Code Playgroud)
CSS
.card {
background-color: #1d1d1d; /* IE fallback */
background-color: rgba(29, 29, 29, 0.95);
color: #fff;
display: inline-block;
margin: auto;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: …Run Code Online (Sandbox Code Playgroud) 有没有办法做到以下几点:
#id {
border-radius: 100px;
width: 100px;
height: 100px;
}Run Code Online (Sandbox Code Playgroud)
<div id="circle">
<h3>Hello</h3>
</div>Run Code Online (Sandbox Code Playgroud)
甲轮div与文本垂直和水平居中.同时保持圈子响应.
我的意思是有width发言权50%的包含div,同时保持height比例以上,以使一个圆.
并且将静态更改100px为pertentages使圆形椭圆形.
我尝试在页面底部修复页脚时出现问题,如下图所示:
虽然我谷歌并看到很多建议,但我仍然面临着这个问题.我怀疑这个问题是<div data-reactroot></div>不能将身高100%设为父母.谁能帮助我?
提前致谢!
更新:页脚样式:
borderTop: '1px solid #ddd',
height: '60px',
lineHeight: '60px',
backgroundColor: 'white'
Run Code Online (Sandbox Code Playgroud) 我们在带有 taillwindcss 的 div 元素内有一个 span 文本,将文本与 div 垂直对齐的最佳方法是什么?
<div class="h-64 w-64 flex flex-col align-items justify-center">
<span>Home</span>
</div>
Run Code Online (Sandbox Code Playgroud) 目前我的blockquotes中的文本是居中的,但是当没有大量要引用的文本并且左边框离文本太远时,它会产生问题.
我希望边框总是距离文本5px(通常位于我博客上的图像中心).
是否有任何方法可以使整个 blockquote 居中,包括左边框,因此它不会卡在一个位置,而文本是唯一居中的?
目前的CSS:
blockquote {
max-width:390px;
color: #5c4c40;
text-align: center;
border-left: 3px solid #897860;
padding-left: 5px;
margin-left: 40px;
}
Run Code Online (Sandbox Code Playgroud) 如何将文字垂直居中?尝试了my-auto类,但仍无法正常工作。它仍然位于顶部。有人可以帮助我找到问题所在吗?
一些代码:
<div class="col-12 col-lg-6 mb-5">
<div class="row">
<div class="col-12">
<div class="block mb-5">MACHINE TO MACHINE</div>
</div>
<div class="col-12">
<div class="block mb-5">DATA LAKE</div>
</div>
<div class="col-6">
<div class="block mb-3">ONLINE DATA API</div>
<div class="row">
<div class="col-12">
<div class="link mb-2">ŠVIETIMAS</div>
</div>
<div class="col-12">
<div class="link mb-2">TRANSPORTAS</div>
</div>
</div>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
完整代码:https: //jsfiddle.net/xqdbf5n4/1/
提前致谢!
我想知道是否有人有任何技术来定位css生成的内容.例如:
.block {
height: 150px;
width: 150px;
border: 1px solid black;
}
.block:after {
content: "content";
}Run Code Online (Sandbox Code Playgroud)
<div class="block"></div>Run Code Online (Sandbox Code Playgroud)
我希望将内容集中在盒子的直接中心,而我的常用技巧都不起作用.有任何想法吗?谢谢!
<div style="background: url('theImages/talentQuote.png') no-repeat center; background-size: 100% 100%; min-height: 125px; min-width: 125px; text-align: center; vertical-align: middle;">
<span style="color: #FFF; font-weight: bold;"><xsl:value-of select="txtQuote" /></span>
</div>
Run Code Online (Sandbox Code Playgroud)
显示这个:

如何修改CSS,因此引号始终位于背景图像的中心
css ×10
html ×8
javascript ×3
css3 ×2
jquery ×2
css-shapes ×1
html5 ×1
reactjs ×1
tailwind-css ×1