[英]How do I center this element?
我的HTML:
<div class="container">
<div class="card login">
<p id="Title">Plex</p>
<div class="label">
</div>
Random text
</div>
<div class="card welcome">
<div class="label">
<p id="Title">Hi!</p>
</div>
Lorem ipsum
</div>
<div class="card extra">
<div class="label">
<p id="Title">Extra</p>
</div>
Lorem ipsum
</div>
</div>
我的CSS:
.container{
display: flex;
width: 100%;
/*align-content: center;*/
}
.card {
flex: 1 1 auto;
border: 1px solid #f3f3f3;
background-color: #f3f3f3;
margin-left: 50px;
margin-right: 50px;
margin-top: 25px;
height: 450px;
}
.label{
background-color: #434342;
width:auto;
height: 70px;
}
.card:not(:first-child){
margin-left: 20px;
}
#Title {
float: left;
font-family: Thinfont-Thin;
font-size: 42px;
color: #d2731d;
text-align: center;
}
JSFiddle: http : //jsfiddle.net/cvYGW/
如何使PLEX HI EXTRA在卡的中间完全对齐以及如何上下移动?
您必须将#title
margin
重置为0,并设置等于父级高度的行高。
#title { /* change this selector to .title */
line-height: 70px;
margin: 0;
font-family: Thinfont-Thin;
font-size: 42px;
color: #d2731d;
text-align: center;
}
参见: http : //jsfiddle.net/cvYGW/9/
顺便说一句,请记住您的代码不是有效的HTML ,因为您使用相同的ID三次(#title)。 在这种情况下,您应该使用class。 而且您不需要任何float属性。
您不应该有一个ID的多个实例,因此首先将#Title更改为一个类
您不能使用float:left;
& text-align:center;
,删除标题p的边距,匹配行高
.title {
margin:0px;
line-height:70px;
font-family: Thinfont-Thin;
font-size: 42px;
color: #d2731d;
text-align: center;
}
#Title {
font-family: Thinfont-Thin;
font-size: 42px;
color: #d2731d;
text-align: center;
margin:0 auto;
}
请参考下面更新的小提琴
通过使用margin css属性为父div提供一些宽度,并在父中心对齐子元素。
margin: 0 auto;
谢谢,
西瓦
查看http://jsfiddle.net/skyrbe/cvYGW/8/
您对多个p
标签使用了相同的ID。 绝对不要那样做。
.Title {
float: left;
font-family: Thinfont-Thin;
font-size: 42px;
color: #d2731d;
text-align: center;
width:100%;
margin:0px auto;
line-height:42px;
}
更新CSS:
#Title {
float: left;
font-family: Thinfont-Thin;
font-size: 20px;
color: #d2731d;
text-align: center;
width: 100%;
}
jquery animation
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#Title').click(function(){
$('#Title').animate({
bottom: '-=20'
}, 1000);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.