Кнопка с центрированным текстом и выравниванием по левому краю

Question

Мне нужен совет относительно правильного центрирования текста и изображений влево или вправо в теге 'a'.

цель кнопку, чтобы иметь с: - выравнивание по левому краю изображения - текст по центру по горизонтали, но оставил aligen если больше строк текста - все элементы должны быть центрированы по вертикали. (. Напр IE ниже 9 не имеет значения) - (. Ех 100px) - должны работать на большинстве современных браузеров только с помощью CSS

я сделал Пример, который, кажется, работает с статическими высотами вот мой Fiddle: https://jsfiddle.net/CtH9k/5819/

-

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

line-height: 100%; 

вот моя скрипка с динамическими высотами https://jsfiddle.net/CtH9k/5820/

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

Answer 1

вы можете попробовать это:

<div> 
     <a href="#"> 
      <span class="imgWrapper"> 
       <img src="https://33.media.tumblr.com/avatar_11e745804f61_128.png" /></span> 
     <span class="spanText">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> 
     </a> 
    </div> 

DEMO FIDDLE

Answer 2

Try Flexbox.

a { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
a .textWrap { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-flow: wrap; 
 
    justify-content: center; 
 
}

<div> 
 
     <a href="#"> 
 
      <img src="https://33.media.tumblr.com/avatar_11e745804f61_128.png" /> 
 
      <span class="textWrap"> 
 
       <span class="spanText">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> 
 
      </span> 
 
     </a> 
 
    
 
    <a href="#"> 
 
      <img src="https://33.media.tumblr.com/avatar_11e745804f61_128.png" /> 
 
      <span class="textWrap"> 
 
       <span class="spanText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> 
 
      </span> 
 
     </a> 
 
    </div>

Answer 3

Во-первых, быть осторожным. Когда вы используете position:absolute, вы должны добавить position:relative родительскому элементу, с которым хотите поместить свой элемент. В вашем первом jsfiddle было похоже, что он работает, потому что ваши a, div и body находятся в том же положении. Во втором, ваше изображение получает «потерянное», потому что вы добавили оболочку span.

Вы можете использовать этот CSS:

top:50%; 
transform: translateY(-50%); 

С и абсолютным и относительным положением, и вы всегда будете уверены в том, что независимо от контейнера или ваша высота элемента всегда будет в центре.

поэтому я добавил эти свойства к текущим:

.spanText {  
    position:relative; 
    top:50%; 
    transform: translateY(-50%); 
} 

.imgWrapper{ 
    top:50%; 
    transform: translateY(-50%); 
} 

a {position:relative;} 

и он работает (попробуйте изменить "200px" высоту к тому, что вы хотите:

JSFIDDLE