Вертикальное выравнивание div внутри div не работает - CSS - PullRequest
Новая
       35

Вертикальное выравнивание div внутри div не работает - CSS

4 голосов
/ 11 сентября 2011

JS скрипка: http://jsfiddle.net/Rkh8L/

Я пытаюсь вертикально разделить div внутри div. MonsterImage - класс, которым я хочу быть по вертикали.

Здесь весь код 

            <div style="float: left; text-align: center; vertical-align: middle; margin:10px;">

                <asp:RadioButton  ID="RdButtonMonsterImages" ClientIDMode="Static" runat="server" />

                <div class="permonster" >
                    <div class="MonsterImage"></div>            
                </div>
        </div>



            .permonster
        {
            width: 130px;
            height: 120px;
            text-align: center;
            vertical-align: middle;
            border-top: 1px solid #f7fcff;
            background: #ababab;
            background: -webkit-gradient(linear, left top, left bottom, from(#e3e6e8), to(#ababab));
            background: -webkit-linear-gradient(top, #e3e6e8, #ababab);
            background: -moz-linear-gradient(top, #e3e6e8, #ababab);
            background: -ms-linear-gradient(top, #e3e6e8, #ababab);
            background: -o-linear-gradient(top, #e3e6e8, #ababab);
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
            -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
            box-shadow: rgba(0,0,0,1) 0 1px 0;
            text-decoration: none;
            padding:2px;
        }


            .MonsterImage
            { 
border-width: 0px; border-style: none; 
background-image: url(http://static.monstermmorpg.com/images/csssprites/RegisterCSS.png); 
background-color: transparent; 
margin:auto; 
background-repeat: no-repeat; 
background-position: -0px -120px;  
width: 130px; 
height: 96px;   
            }

Ответы [ 3 ]

12 голосов
/ 12 октября 2012

Вы можете центрировать (выравнивание по вертикали и горизонтали) div внутри div, как показано ниже

HTML 

<div id="parent">
    <div id="child">
    </div>
</div>

CSS 

#parent {
    background-color: #333333;

    position: relative;
    height: 300px; 
    width:300px;
}

#child {
    background-color: #cccccc;

    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

См. эту статью , в которой объясняется, как она работает.
Примечание. Цвет фона только для иллюстрации.

См. Результат ниже.

enter image description here

1 голос
/ 11 сентября 2011

Вы не можете выровнять этот элемент по вертикали, просто добавьте немного отступа к вершине вашего класса .MonsterImage, что-то вроде margin-top:13px; должно сделать это.

0 голосов
/ 11 сентября 2011

Не хочу вас разочаровывать, но это невозможно сделать только с помощью CSS.

Вот несколько вещей, которые вы можете сделать:

  • использовать фиксированные верхние и нижние поля во внутреннем divи оставьте высоту внешнего div в 'auto' (вы потеряете контроль над высотой внешнего div)
  • жестко закодируйте все (очевидно, вы потеряете автоматическое изменение размера)
  • useJavaScript для настройки размеров на лету после загрузки документа
...