как выровнять Div, содержащий текст и изображения в центр

я хочу сделать следующее:как выровнять Div, содержащий текст и изображения в центр

ДИВ, содержащим 50x50 изображения и текст рядом с ней 25px шрифтом.
Изображение и текст должны выровняться по середине.
Разделитель, содержащий изображение и текст, должен выровняться по центру его родительского элемента.

Я пробовал следить, но это не дает желаемого результата.

Что нужно сделать?

http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float

<html> 
<head> 
<style> 
img { 
    float: center; 
} 
</style> 
</head> 
<body> 

<p align="center"><img src="w3css.gif" alt="W3Schools.com" width="50" height="50"> 
Lorem .</p> 

</body> 
</html>

источник

2016-06-13 GJain

Просто, чтобы подтвердить, вы ищете код, чтобы сделать его по вертикали и по горизонтали среднего справа от центра ?. Метод таблицы - лучшее решение, которое я нашел, если это так, пожалуйста, обратитесь к этому сообщению: http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and -оризонтно? rq = 1 – shiva

Попробуйте это:

<p align="center"><img src="http://www.ifn-modern.com/skin/frontend/fortis/default/images/phone.png" alt="" width="50" height="50"> 
Lorem .</p> 

p img{ 
    display:inline-block; 
    vertical-align:middle; 
    margin-right:5px; 
}

H ERE является jsfiddle ссылка: https://jsfiddle.net/x376p83x/

источник

2016-06-13 09:01:56

Вообще говоря, вы будете использовать text-align: center на родительском контейнере.

http://www.w3schools.com/cssref/pr_text_text-align.asp

Вы можете также достичь этого с помощью полей, т.е. margin: 0 auto , где «0» ваши вертикальные поля, и «авто» рассчитывает горизонтальные поля автоматически - тем самым позиционируя свой элемент в центре.

Для вашего варианта использования я предлагаю выравнивание текста.

источник

2016-06-13 08:55:46

попробовать это

html 
<p class="cetner"><img src="http://www.planwallpaper.com/static/images/butterfly-hq-wallpaper_09354994_256.jpg" alt="image" width="50" height="50"> 
Lorem .</p> 

    css 
    p.cetner { 
    width: 100px; 
    height: 50px; 
    text-align: center; 
} 

img { 
display:inline-block; 
vertical-align:middle; 
}

источник

2016-06-13 09:00:08 Maharajan

для демонстрации: https: //jsfiddle.net/mhrjnsa1/r2wupagn/8/ – Maharajan

Вы можете сделать это с Flexbox:

.parent { 
 
    height: 300px; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background-color: lightgrey; 
 
} 
 
p { 
 
    font-size: 25px; 
 
    }

<div class="parent"> 
 

 
<p> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.</p> 
 
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS1EcWaTLIwhn69VJFubIdi4cpn2MYbkYN8hvMk00abhBHoO5fTnjdTgLY" alt="W3Schools.com" width="50" height="50"> 
 
    </div>

источник

2016-06-13 09:00:25

пожалуйста, проверьте этот plunker https://plnkr.co/edit/wlIixTpqm2dUJnalb9b6?p=preview

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <h1>Centered Div</h1> 
    <div class="parent-div"> 
     <div class="child-div"> 
     <span class="my-text">Iam Centered centerd text very long Iam Centered centerd text very long</span> 
     <img src="test.svg" style="width:50px; height:50px;"/> 
     </div> 
    </div> 
    </body> 

</html>

и CSS

/* Styles go here */ 

.parent-div{ 
    background:green; 
    padding:10px; 
} 
.child-div{ 
    display:table; 
    margin:0 auto; 
text-align:center; 
color:white; 


} 
.my-text{ 
    max-width:200px; 
    display:inline-block; 
}

источник

2016-06-13 09:47:44

как выровнять Div, содержащий текст и изображения в центр

ответ

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