相关疑难解决方法(0)
如何在一个简单的HTML文档中水平和垂直居中HTML5视频？
假设我有一个非常简单的HTML页面,其中包含一个HTML5视频元素.它的源代码是:
<html>
<head>
<title>{TITLE}</title>
</head>
<body>
<video height="{HEIGHT}" width="{WIDTH}" controls="">
<source src="{SOURCE}" type="{TYPE}"/>
</video>
</body>
</html>
如何在Web浏览器中水平和垂直居中显示该视频元素？我更喜欢CSS解决方案,或者至少是一种尽可能少使用hackish技术的解决方案,但我会采取我能得到的.
4
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
如何在DIV中垂直和水平居中显示文本
<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>
显示这个:
如何修改CSS,因此引号始终位于背景图像的中心
3
推荐指数
推荐指数
1
解决办法
解决办法
2762
查看次数
查看次数
如何在div容器的中间垂直居中h1？
正如在标题中所说的,我需要的是在div的中间垂直居中标题h1.
这是一个非常简单的代码:
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
}
h1{
vertical-align:middle;
}
这是一个演示
使用显示表后,文本垂直居中,谢谢大家.现在我正面临一个新问题; (请看这里的jsffidle 请问我想要的是"文本1"和"文本2"并排显示,每个小蓝色div都在每个红色div中间的两个红色div下面..任何帮助请？
3
推荐指数
推荐指数
1
解决办法
解决办法
6146
查看次数
查看次数
水平和垂直居中 h1
我想<h1>居中。
问题： 当我水平居中文本时，我不能垂直居中，如果我垂直居中，那么我不能水平居中。
我的代码：
h1 {
font-weight: 400;
text-transform: uppercase;
font-size: 28px;
}
.main-text {
text-align: center;
}<header>
<div class="main-text">
<h1>This is Centered Text.</h1>
</div>
</header>我试过的： 这里是我试过的一些 CSS。
.main-text {
text-align: center;
vertical-align: middle;
}
下面的代码有效，但文本没有响应。
.main-text {
position: absolute;
top: 30%;
left: 30%;
}
我希望它看起来如何：
3
推荐指数
推荐指数
1
解决办法
解决办法
6588
查看次数
查看次数
将元素水平和垂直对齐到页面中心
很长一段时间我没有建立一个网站,我不记得如何以正确的方式垂直对齐div.我检查了很多在线资源和stackoverflow问题,但没有任何帮助,或者至少我没有看到我的错误在哪里.
我创建了一个文本,在开始时是隐藏的,经过一段时间后会出现并使用jQuery扩展.它似乎工作,它是水平居中,但不是垂直居中.如何垂直对齐页面中心？
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link href="main.css" rel="stylesheet" />
<title>Homepage</title>
<script src="jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="container" align="center">
<p id="robo">ROBO</p>
</div>
<script>
$(document).ready(function() {
$("#robo").delay(500).fadeIn(500).animate({fontSize: "3em"}, 1000);
});
</script>
</body>
</html>
CSS
*{
margin: 0px;
padding: 0px;
}
body {
text-align: center;
width: 100%;
}
#container {
width: 1024px;
height: 768px;
margin: 0 auto;
}
#robo {
display:none;
width:200px;
height:200px;
}
JSFiddle示例:http://jsfiddle.net/sMrL9/
2
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
在div中垂直和水平居中播放按钮
我有这个jsfiddle演示.
我有一个vimeo电影的缩略图(这里是占位符)我想要一个播放btn.
整个图像都是可点击的,因此播放按钮仅用于说明.
我想播放按钮死点.
我可以用负边距来做,但我不会真正知道播放按钮的大小.
如何知道尺寸,我怎么能将播放按钮置于中心位置.
.video_thumbnail {
border: 1px solid red;
position: relative;
}
.video_thumbnail:hover {
cursor: pointer;
}
.video_thumbnail .play-btn {
background: white;
background: blue;
display: inline-block;
padding: 25px;
position: absolute;
top: 50%;
left: 50%;
/*
margin-left: -35px;
margin-top: -35px;
*/
}
.video_thumbnail .play-btn:after {
content: "";
display: block;
position: relative;
left: 2px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent white;
}
2
推荐指数
推荐指数
1
解决办法
解决办法
1756
查看次数
查看次数
如何将div中的元素居中？
我在主div中有一些div,但是我已经看过类似的每个问题了,我尝试了很多东西,但我不能将它们水平居中.我只能把它们放在另一边而不是中心.
.ground {
width: 390px;
height: 575px;
border: 1px solid white;
}
.line {
padding: 10px
}
.active {
width: 30px;
height: 30px;
opacity: 0.5;
background: gray;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 100px;
display: inline-block;
border: 2px solid black;
}
.nonactive {
width: 30px;
height: 30px;
opacity: 1.0;
background: lime;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 100px;
display: inline-block;
border: 2px solid black;
}
你可以看到那5个圆圈是我需要将它们放在主div区域内的圆圈.
2
推荐指数
推荐指数
1
解决办法
解决办法
72
查看次数
查看次数
使用CSS进行文本的垂直和水平对齐
我试图在div框(背景颜色)内水平和垂直对齐文本,但我无法做到.
我在网上搜索过margin: auto,text-align: center并没有做好工作.
有小费吗？
检查FIDDLE.
HTML
<div id="services"><div class="holder container clearfix">
<div class="bgtop"><span class="top">Corte cabelo + Afiar</span></div>
<div class="bgprice"><span class="price">10€</span></div>
</div></div>
CSS
#services .holder .bgtop{
background-color: #27ae60;
height:50px;
width:200px;
z-index: 1;
}
#services .holder .bgprice{
height:50px;
width:90px;
background-color: #272727;
z-index: 1;
}
#services .holder span.top{
color: white;
font-style: italic;
font-weight: bold;
font-size: 1.000em;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
#services .holder span.price{
color: white; …1
推荐指数
推荐指数
1
解决办法
解决办法
2826
查看次数
查看次数
CSS:如何在图像上垂直和水平居中文本
我想做的就是将文本垂直和水平放在img上.
试了很多东西但到目前为止没有任何作用:/
<div class="img_container">
<img class="cover-image" src="img.jpg" alt="omg" />
<h2> bla bla bla </h2>
</div>
.img_container {
width: 100%;
}
.img_container h2 {
margin: 0;
}
1
推荐指数
推荐指数
1
解决办法
解决办法
1289
查看次数
查看次数
如何将图标对齐到 div 元素内的中心？
我想将图标居中到 div 元素“矩形”。也欢迎任何其他替代解决方案。
body {
background-color: black;
}
.rectangle {
width: 125px;
height: 125px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
}
h3 {
color: #fff;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="rectangle">
<span><i class="fa fa-quora" aria-hidden="true" style="font-size: 75px;" align="center"></i></span>
</div>
<h3>Quora</h3>1
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数