Вопрос о выравнивании строки внутри строки

Я пытаюсь получить изображения, чтобы получить «.other-wrap», чтобы по вертикали выровнять изображение слева. Я попытался добавить маржу или границу, но по какой-то причине это подталкивает «.other-wrap» вниз и дальше от выравнивания. Может ли кто-нибудь объяснить, что вызывает это поведение, и что css я могу добавить в «.other-wrap», чтобы заставить его выравниваться без изменения структуры html.Вопрос о выравнивании строки внутри строки

fiddle

Html:

<div id="588970897807405-list" class="main"> 
<div id="588970897807405" class="main-wrap"> 
    <div class="inner-wrap"> 
     <div class="inner-name-wrap" style="font-size: 10pt;"> 
     <div class="inner-name">header</div> 
     </div> 
     <div class="inner-img-wrap"> 
     <img id="588970897807405-event-img" class="inner-img" src="http://nodogaboutit.files.wordpress.com/2012/10/j04310181.jpg"> 
     </div> 
     <div class="formatted-footer-wrap" style="font-size: 10pt;"> 
     <div class="footer">footer</div> 
     </div> 
    </div> 
    <div class="other-wrap"> 
     <div class="other-inner"> 
     <div class="other-img-wrap"><img class="other-img" width="120" height="120" src="http://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg"></div> 
     </div> 
    </div> 
</div>

CSS:

.main .inner-img{ 
vertical-align:middle; 
margin:auto; 
display:block; 
width:120px; 
height:120px; 
top:0px; 
} 

.other-wrap{ 

    /*border:solid black 15px;*/ 
    margin:15px; 
} 

.main .inner-name-wrap{ 
    white-space:nowrap; 
    width:150px; 
    font-size:14px; 
    text-overflow:ellipsis; 
    font-weight:normal; 
    display:block; 
    color:white; 
    background:black; 
} 

.main .formatted-footer-wrap{ 
    color:white; 
    display:block; 
    font-size:10px; 
    width:150px; 
    background:black; 
} 

.main .other-wrap{ 
    display:inline-block; 
    font-size:12px; 
} 

.main .formatted-time-wrap{ 
    display:none; 
    font-size:10px; 
} 

.inner-wrap{ 
    display:inline-block; 
    border:solid hsl(0, 100%, 100%) 1px;  
}

источник

2013-10-25 Ben Pearce

действительно чувствую, что вам нужно потратить немного больше времени с этим. Я не очень люблю голосовать, но я был близок к этому. Причина: вы пытаетесь добиться поведения по умолчанию, и для решения требуется, чтобы кто-то другой деконструировал ваш код для вас и выяснил, почему поведение по умолчанию не работает. Я бы предложил снять все это до тех пор, пока он не сделает то, что он должен делать, а затем начните добавлять вещи обратно, пока не найдете, что его нарушает. –

Кажется, что вам нужно vertical-align.

Попробуйте vertical-align: middle:

.main-wrap{ 
    font-size: 0; /* To fix extra space due to whitespaces in HTML */ 
} 
.other-wrap, .inner-wrap{ 
    display:inline-block; 
    vertical-align: middle; 
    margin: 15px; 
}

Demo

источник

2013-10-25 23:14:44 Oriol

Вопрос о выравнивании строки внутри строки

ответ

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