Как выровнять изображение и текст
Я кодирую клон Facebook с некоторыми изменениями, чтобы улучшить свои навыки, но столкнулся с проблемой.
У меня есть изображение (изображение профиля) и текст (имя пользователя) под <h1> Дома. Я пытаюсь выровнять текст точно по центру справа от изображения.
пример:
[
top of image
CENTER OF IMAGE TEXT
bottom of image
] ( what I expected/Wanted)
Я не получаю желаемого результата. Вместо изображения текст находится вверху справа от изображения. пример:
[
top of image
center of image
BOTTOM OF IMAGE TEXT
](result)
HTML:
<div class = "sidebar">
<h1 class = "home">Home</h1>
<a class = "create-button" href = "#">Create</a>
<div class = "personnal-info">
<img class = "sidebar-profile-picture" src = "icons\my profile.jpg">
<p class = "my-user-name">Said User</p>
</div>
</div>
CSS:
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
background-color: white;
width: 400px;
margin-left: 20px;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 220px;
}
.sidebar-profile-picture {
height: 30px;
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
display: inline-block;
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
}
Я не знаю, хотите ли вы, чтобы это было в моем имени пользователя. Я пробовал, но это не сработало. Спасибо, в любом случае.
попробуйте поплавок: влево; на картинке
Ответы 3
Не уверен, что правильно понял ваше требование. Вы можете использовать flex для достижения следующего результата. Дайте мне знать, если это работает
.personnal-info {
display:flex;
align-items: center
} <div class = "sidebar">
<h1 class = "home">Home</h1>
<a class = "create-button" href = "#">Create</a>
<div class = "personnal-info">
<img class = "sidebar-profile-picture" src = "//via.placeholder.com/50x50">
<p class = "my-user-name">Said User</p>
</div>
</div>Я округлил изображение, чтобы оно было не точно посередине изображения. Но он был действительно близок к этому, поэтому он выполнил то, что я хотел. Спасибо !
0 Привет, Михай Т, спасибо за ответ! Это действительно сработало. Но не поставил его в идеальное положение. На самом деле я решил проблему, поставив position: relative; на личной информации. Затем я вставил свое имя пользователя position: absolute; верх: -8px; PS: Это также работало с основанием: -8px; вместо верха: -8px. Спасибо !
Привет, Михай Т, спасибо за ответ! Это действительно сработало.
Но не поставил его в идеальное положение.
Я фактически решил проблему, поставив position: relative; в личной информации.
Затем я ввел свое имя пользователя
position: absolute; top: -8px;
PS: Это также работало с bottom: -8px; вместо top: -8px.
Спасибо !
Пожалуйста, добавьте это как комментарий к моему ответу. Не как фактический ответ :), а также оцените мой ответ как принятый, если он сработал. Спасибо !
Flexbox идеально подходит для этих случаев. Измените div .personalInfo на flexbox, добавив свойство display: flex. Затем у вас есть доступ ко многим другим свойствам для центрирования и т. д.
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
background-color: white;
width: 400px;
margin-left: 20px;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 220px;
}
.sidebar-profile-picture {
height: 30px;
width: 30px; /* demo only */
background-color: blue; /* demo only */
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
/* display: inline-block; -> not necessary anymore*/
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
}
/* FLEXBOX */
.personal-info{
display: flex;
flex-direction: row; /* display children in a horizontal row */
align-items: center; /* vertically align items in the center */
}<div class = "sidebar">
<h1 class = "home">Home</h1>
<a class = "create-button" href = "#">Create</a>
<div class = "personal-info">
<img class = "sidebar-profile-picture">
<p class = "my-user-name">Said User</p>
</div>
</div>
выравнивание текста: конец; ?