Как выравнивать по центру по вертикали текст с моим изображением

Question

Я пытаюсь вертикально центрировать выравнивание текста с моим изображением. В настоящее время текст выглядит так, как показано в нижней части изображения.

Вот мой jsfiddle: http://jsfiddle.net/huskydawgs/L5Le0w37/7/

Вот мой HTML:

<div class="column-resources-box"> 
    <a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /></a> 

<h4 class="title-bar">Apple<br> 
    Center</h4> 

<ul> 
    <li>Gala</li> 
    <li>Pink Lady</li> 
    <li>Fuji</li> 
</ul> 
</div> 

Here's my CSS: 

     .column-resources-box { 
     width: 200px; 
     float: left; 
     margin: 15px; 
    } 

     .column-resources-box img { 
    margin:0 2%; 
    float:left; 
    height:50px; 
    width:50px; 
} 
     } 

h4.title-bar { 
    color: #2251a4; 
    background: none; 
    font-family: 'Arial', inherit; 
    font-weight: normal; 
    text-transform: none; 
    line-height: normal; 
    margin: 0; 
    padding: 0; 
    text-align: left; 
} 

Answer 1

Там есть ошибка синтаксиса в вашем CSS. Вот ваш CSS, отрытый сверху:

 .column-resources-box { 
     width: 200px; 
     float: left; 
     margin: 15px; 
    } 

     .column-resources-box img { 
    margin:0 2%; 
    float:left; 
    height:50px; 
    width:50px; 
} 
     } 

Обратите внимание на внешнюю скобку. Кажется, это мешает браузеру перейти к оставшемуся CSS.

Исправлено: http://jsfiddle.net/L5Le0w37/13/

Вы можете переместить его немного вниз, к центру его position:relative; top:7px;:

Centered: http://jsfiddle.net/L5Le0w37/16/

Answer 2

Вы можете использовать абсолютное позиционирование, чтобы навести именно там, где вы хотите их.

Fiddle: http://jsfiddle.net/t8rL871j/

.column-resources-box { 
 
     width: 200px; 
 
     float: left; 
 
     margin: 15px; 
 
     position: relative; 
 
    } 
 
    .column-resources-box img { 
 
     margin:0 2%; 
 
     height:50px; 
 
     width:50px; 
 
     position: absolute; 
 
    } 
 
    h4.title-bar { 
 
     color: #2251a4; 
 
     background: none; 
 
     font-family:'Arial', inherit; 
 
     font-weight: normal; 
 
     text-transform: none; 
 
     line-height: normal; 
 
     margin: 0 0 0 0; 
 
     padding: 0; 
 
     text-align: left; 
 
     position: absolute; 
 
     top: 10px; 
 
     left: 60px; 
 
    } 
 

 
    .column-resources-box ul { 
 
     margin:60px 2%; 
 
     height:50px; 
 
     width:70px; 
 
     position: absolute; 
 
    }

<div class="column-resources-box"> <a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /></a> 
 

 
    
 
<h4 class="title-bar">Apple<br> 
 
    Center</h4> 
 

 
    <ul> 
 
     <li>Gala</li> 
 
     <li>Pink Lady</li> 
 
     <li>Fuji</li> 
 
    </ul> 
 
</div>

Answer 3

Попробуйте это. Я обернул два элемента, которые вы хотите центрировать в div, а затем центрировал изображение.

.wrap { 
 
    display:inline 
 
} 
 
.apple_image { 
 
    vertical-align:middle 
 
}  
 

 
.column-resources-box { 
 
     width: 200px; 
 
     float: left; 
 
     margin: 15px; 
 
    } 
 

 
     .column-resources-box img { 
 
    margin:0 2%; 
 
    float:left; 
 
    height:50px; 
 
    width:50px; 
 
} 
 
     } 
 

 
h4.title-bar { 
 
    color: #2251a4; 
 
    background: none; 
 
    font-family: 'Arial', inherit; 
 
    font-weight: normal; 
 
    text-transform: none; 
 
    line-height: normal; 
 
    margin: 0 0 0 0; 
 
    padding: 0; 
 
    text-align: left; 
 
}

<div class="column-resources-box"> 
 
    <div class="wrap"> 
 
     <a class="apple_image" href="http://en.wikipedia.org/wiki/Apple"> 
 
      <img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /> 
 
     </a> 
 

 
     <h4 class="title-bar">AppleCenter</h4> 
 
    </div> 
 
<ul> 
 
\t <li>Gala</li> 
 
\t <li>Pink Lady</li> 
 
\t <li>Fuji</li> 
 
</ul> 
 
</div>

Answer 4

я переписал код немного, но вот еще один возможный способ использования верхнего отступа ..

vertical-align: top; 
padding: 4px 0px 0px 0px; /* adjust top padding */ 

http://jsfiddle.net/Hastig/mj5yzsr7/3/

Вы можете настроить интервал между Apple, и Центр с h4.title-bar { line-height: 25px; } затем отрегулируйте верхнюю прокладку для компенсации.

Answer 5

Оберните текст и изображения внутри div и стиля это так:

HTML

<div class="appleWrapper"> 
    <a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /></a> 
    <h4 class="title-bar">Apple<br>Center</h4> 
</div> 

CSS

.appleWrapper { 
    height: 50px; 
} 
.title-bar { 
    margin: 0; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Отъезд online example here