1. дома
  2. Вопрос и ответ
  3. Вертикально выравнивающие элементы

Вертикально выравнивающие элементы

2013-11-09 7 views
1

Я пытаюсь понять, как центрировать элементы внутри div. У меня есть этот базовый код я работаю с, и я пытаюсь получить «Это кнопка» элемент, чтобы быть в центреВертикально выравнивающие элементы

<body> 

<div style="width:960px;background-color:#d7d7d7;"> 

    <div style=" 
    width:400px; 
    padding:10px; 
    height:auto; 
    background-color:#006699; 
    display:inline-block; 
    "> 

    <p> Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
    </div>  

    <div style=" 
    width:100px; 
    padding:10px; 
    height:auto; 
    background-color:#b1b1b1; 
    float:right; 
    display:inline-block; 
    margin:auto!important; 
    vertical-align:middle; 
    "> 

    <p>This is a button</p> 

    </div>  

</div> 

</body>

Это по существу 1 DIV, делится на 2 с текстом на левой стороне и a «Это ярлык кнопки» находится в центре правой стороны, но я не могу понять, как добраться до центра, я пробовал всевозможные методы.

Вся помощь/совет приветствуются.

источник

2013-11-09 Naz

ответ

2

Вы можете сделать это с помощью следующей разметки:

<div class="container"> 
    <div class="left"> 
    <p>Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
    </div> 
    <div class="right"> 
    <p class="button">Click Me!</p> 
    </div> 
</div>

CSS:

.container { 
    width: 960px; 
    background-color: #d7d7d7; 
    overflow: hidden; 
    display: table; 
} 

.left, 
.right { 
    box-sizing: border-box; 
    width: 50%; 
    display: table-cell; 
} 

.left { 
    padding: 20px 10px; 
    background: #006699; 
} 

.right { 
    text-align: center; 
    vertical-align: middle; 
} 

.button { 
    border: 1px solid green; 
    display: inline-block; 
}

http://jsfiddle.net/yh6mn/1/

Независимо от того, что размер вашего пункта - кнопка для право всегда будет согласовано с абсолютным центром.

источник

2013-11-09 15:59:47 silicakes

Смежные вопросы

 Смежные вопросы