Вертикальный центр внутристрочного блока div внутри динамической высоты div

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

В самом div находится изображение svg, некоторый текст под изображением и плавает вправо и отображается в виде строкового блока. Слева от изображения, также в контейнере div, есть текст, отображающий заголовок. Если текст заголовка отображается в> 1 строке, изображение должно плавать посередине.

Это означает, что высота динамическая, и я не буду знать заранее.

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

.like-container { 
 
    
 
} 
 

 
.like-div { 
 
\t display: inline-block; 
 
\t float: right; 
 
\t font-size: 10px; 
 
\t margin-right: 100px; 
 
} 
 

 
.title { 
 
\t font-size: 40px; 
 
\t width: calc(100% - 100px); 
 
}

<div class="like-container"> 
 
     <div class="like-div"> 
 
     <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/></sfw></metadata><path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653 c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/><path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194 c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758 c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504 c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481 c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809 C268.403,168.538,290.992,168.011,278.918,147.336z"/></svg> 
 
     <span>Like</span> 
 
     </div> 
 
     <div class="title"> 
 
     This is the Title! 
 
     </div> 
 
    </div>

Я создал plnkr, чтобы помочь показать вам, как это выглядит: http://plnkr.co/edit/qzqTjQ8W7jl72nRKd6Sj

Сладкий Иисус помог мне!

источник

2015-10-20 Tom O' Brien

Я предлагаю использовать flexbox + align-items для центрирования + order для CONTROLLI в позиции, ширину существующей разметки, см. support details и соответствующие префиксы.

jsfiddle

.like-container { 
    display: flex; 
    align-items: center; 
} 
.like-div { 
    font-size: 10px; 
    margin-right: 100px; 
    order: 1; 
} 
.title { 
    font-size: 40px; 
    flex: 1; 
}

Если вам необходимо поддерживать IE9, вы можете использовать этот CSS макет таблицы, но вам нужно настроить разметку, поместите <div class="title"> перед тем <div class="like-div">.

jsfiddle

.like-container { 
    display: table; 
    width: 100%; 
} 
.title, .like-div { 
    display: table-cell; 
    vertical-align: middle; 
} 
.title { 
    font-size: 40px; 
    width: 100%; 
} 
.like-div { 
    font-size: 10px; 
    padding-right: 100px; 
}

источник

2015-10-20 19:44:56 Stickers

-1

это может помочь вам, здесь сосредоточено ДИВ в наиболее общем виде

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    position: absolute; 
 
    top:0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<div>my div here</div>

источник

2015-10-20 19:35:40 indubitablee

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

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

скрипку: https://jsfiddle.net/qbyxkf71/

HTML

<div class="like-container"> 
     <div class="title">This is the Title!</div> 
    <div class="like-div"> 
     <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve"> 
      <path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653 c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z" /> 
      <path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194 c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758 c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504 c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481 c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809 C268.403,168.538,290.992,168.011,278.918,147.336z" /> 
     </svg> <span>Like</span> 

    </div> 

</div>

CSS

.like-container { 
    border:1px solid; 
    display:flex; 
    align-items:center; 
} 
.like-div { 
    display: inline-block; 
    float: right; 
    font-size: 10px; 
    margin-right: 100px; 
} 
.title { 
    font-size: 40px; 
    width: calc(100% - 100px); 
}

источник

2015-10-20 19:42:21 Jesse

Что такое поддержка, как для этого решения? на что% покрытия он работает? –

вот текущая поддержка flexbox http://caniuse.com/#search=flexbox – Jesse

вы можете использовать direction и падение float: (для старых браузеров)

.like-container { 
 
    direction: rtl; 
 
} 
 
.like-div { 
 
    display: inline-block; 
 
    font-size: 10px; 
 
    vertical-align: middle; 
 
    width: 2em; 
 
    direction: ltr; 
 
} 
 
.title { 
 
    font-size: 40px; 
 
    width: calc(100% - 0.65em); 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    direction: ltr; 
 
}

<div class="like-container"> 
 
     <div class="like-div"> 
 
     <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/></sfw></metadata><path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653 c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/><path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194 c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758 c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504 c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481 c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809 C268.403,168.538,290.992,168.011,278.918,147.336z"/></svg> 
 
     <span>Like</span> 
 
     </div> 
 
     <div class="title"> 
 
     This is<br/> the Title! 
 
     </div> 
 
    </div>

или использовать display:flex; для молодых браузеров (наиболее effici лор ИМХ)

.like-container { 
 
    display: flex; 
 
    flex-direction: row-reverse 
 
} 
 
.like-div { 
 
    font-size: 10px; 
 
    margin: auto; 
 
} 
 
.title { 
 
    font-size: 40px; 
 
    flex: 1 
 
}

<div class="like-container"> 
 
     <div class="like-div"> 
 
     <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/></sfw></metadata><path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653 c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/><path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194 c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758 c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504 c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481 c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809 C268.403,168.538,290.992,168.011,278.918,147.336z"/></svg> 
 
     <span>Like</span> 
 
     </div> 
 
     <div class="title"> 
 
     This is<br/> the Title! 
 
     </div> 
 
    </div>

источник

2015-10-20 19:47:21

Вертикальный центр внутристрочного блока div внутри динамической высоты div

ответ

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