Как разместить кнопку в центре div динамического размера

у меня есть этот код:

<div class="outer">
    <ul class="list">
        <li class="inner">
            <div class="line">information1</div>
            <div class="line">hyperlink1</div>
        </li>
        <li>
            <div class="line">information2</div>
            <div class="line">hyperlink2</div>
        </li>
        <li>
            <div class="line">information3</div>
            <div class="line">hyperlink3</div>
        </li>
        <li>
            <div class="line">information4</div>
            <div class="line">hyperlink4</div>
        </li>
    </ul>
    <input type="submit" id="send" value="send" class="button"/>
</div>

и css:

.outer
{
    display: table;
    border: 1px solid;
    padding: 5px;
}    
.list
{
    list-style: none;
    padding: 5px;
}    
.inner
{
    display: table-row;
    padding: 5px;
}    
.line
{
    display: table-cell;
    border: 1px solid;
    border-radius: 5px;
}    
.button
{
    top:50%; 
    left:50%;
}

выход: этой

теперь я хочу поместить кнопку в центр "внешнего" div независимо от того, какова ширина.

пример: я хочу, чтобы кнопка была в центре даже для:этой. без необходимости изменять css при каждом изменении размера div. Даже если "внешний" div является динамическим, кнопка должна быть в центре.

спасибо вы.

7
alignment button css html

5 ответов

Это достигает того, что вы ищете простым, кратким способом:

.button {
    display:block;
    margin: 0 auto;
}

http://fiddle.jshell.net/mDHBX/2/

16

вам нужно дать кнопке определенную ширину, а затем вы можете использовать автоматические поля

.button {
  display: block;
  margin: 0 auto;
}

http://fiddle.jshell.net/CrHyd/

4

есть несколько способов сделать это. Я предпочитаю использовать проценты так:

input[type="submit"]{
    min-width:20%;
    max-width:20%;
    margin:0% 39% 0% 40%; //margin-right = 39% to stop errors
}

другие люди предпочитают margin:auto подход, но лично я никогда не находил, что это работает. Другие методы включают использование floats но я не согласен с этим свойством, поскольку оно неправильно выравнивает другие элементы в некоторых браузерах.

использование top и left приведет к ошибкам, поскольку вы не указали тип позиции, отличный от default (static).

1

Это должно работать

.outer {
display: inline-block;
text-align: center;
}

скрипка

0

просто изменить .button этого, с помощью margin собственность. (1 строка fix)

.button
{
    margin:0 auto;
}

вот Скрипка, где я сделал .outer фиксированная ширина 500px просто чтобы показать пример того, что margin тут:

демо

0