我的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在卡片中间完全对齐,如何向上或向下移动?
答案 0 :(得分:2)
您必须为margin
将#title
重置为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)。在这种情况下你应该使用类。而且你不需要任何浮动属性。
答案 1 :(得分:1)
您不应该有多个ID实例,因此首先将#Title更改为类
您无法使用float:left;
&amp; text-align:center;
,从标题p中删除边距,匹配行高
.title {
margin:0px;
line-height:70px;
font-family: Thinfont-Thin;
font-size: 42px;
color: #d2731d;
text-align: center;
}
答案 2 :(得分:0)
#Title {
font-family: Thinfont-Thin;
font-size: 42px;
color: #d2731d;
text-align: center;
margin:0 auto;
}
答案 3 :(得分:0)
答案 4 :(得分:0)
请参阅以下更新的小提琴
为父div提供一些宽度,并使用margin css属性将子元素对齐在父级的中心。
margin: 0 auto;
谢谢,
希瓦
答案 5 :(得分:0)
查看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;
}
答案 6 :(得分:0)
更新css:
#Title {
float: left;
font-family: Thinfont-Thin;
font-size: 20px;
color: #d2731d;
text-align: center;
width: 100%;
}
答案 7 :(得分:0)
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);
});
});