Как центрировать этот элемент?

Question

Мой 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 все выровнять идеально в середине своих карт и как сделать Я двигаю их вверх или вниз?

Answer 1

Вы должны сбросить margin 0 для #title и поставить высоту строки, которая равна высоте родителя.

#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, как вы используете один и тот же идентификатор в три раза (#title). Вы должны использовать класс в этом случае. И вам не нужно какое-либо свойство float.

Answer 2

#Title { 
font-family: Thinfont-Thin; 
font-size: 42px; 
color: #d2731d; 
text-align: center; 
margin:0 auto; 
} 

Answer 3

У меня есть обновление Js скрипку вам просто нужно добавить

#Title { 
    line-height:70px; 
    width:100%; 
    margin:0; 
} 

Check on fiddle

Answer 4

см ниже обновленную скрипку

http://jsfiddle.net/cvYGW/10/

дают некоторую ширину для родителейdiv и выровнять дочерние элементы в центре родителя с использованием свойства margin css.

margin: 0 auto; 

Спасибо,

Siva

Answer 5

Заканчивать http://jsfiddle.net/skyrbe/cvYGW/8/

Вы использовали тот же идентификатор для нескольких p тегов. Никогда не делай этого.

.Title { 
    float: left; 
    font-family: Thinfont-Thin; 
    font-size: 42px; 
    color: #d2731d; 
    text-align: center; 
    width:100%; 
    margin:0px auto; 
    line-height:42px; 
} 

Answer 6

Вы не должны иметь несколько экземпляров ID, поэтому в первую очередь изменить #title к классу

Вы не можете использовать float:left; & text-align:center;, удалите запас из вашего заголовка р, соответствует линии высота

.title { 
    margin:0px; 
    line-height:70px; 
    font-family: Thinfont-Thin; 
    font-size: 42px; 
    color: #d2731d; 
    text-align: center; 
} 

http://jsfiddle.net/cvYGW/6/

Answer 7

обновление CSS:

#Title { 
float: left; 
font-family: Thinfont-Thin; 
font-size: 20px; 
color: #d2731d; 
text-align: center; 
width: 100%; 

}

Answer 8

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); 
     }); 
    }); 

updated fiddle