HTML/CSS matnli logotip

Shuning uchun men ushbu bu logo ni qo'lga kiritishga harakat qilardim, lekin matn o'rtada bo'lmaydi.

Men vertikal chiziqni va chiziq bo'yi balandligini sinab ko'rdim, lekin muvaffaqiyatsiz. Umid qilamanki kimdir :)

Kod:

<div>
    <div id="logo">
        <div id=""></div>
        
title
text

</div> <div id=""> </div> </div>

CSS

#header {height: 100px; background: #fff}
#logo div {background: url(/img/logo.png) center/contain no-repeat; width: 70px; height: 70px; float: left}
#logo p {vertical-align: middle}
0

6 javoblar

Umid qilamanki bu ish. oddiy misol

<div>
  
  verticle text.
</div>
0
qo'shib qo'ydi

Ushbu CSSni konteyner elementida sinab ko'ring

display: flex;
align-items: center;
justify-content: center;
0
qo'shib qo'ydi
... konteyner elementida qo'shilishi kerak
qo'shib qo'ydi muallif Johannes, manba
thanks @Johannes
qo'shib qo'ydi muallif stackoverfloweth, manba
yordam berishdan baxtiyormiz, shuning uchun eski brauzerlar ekranni qo'llab-quvvatlamaydi: moslashuvchan. w3schools.com/cssref/css3_pr_flex.asp
qo'shib qo'ydi muallif stackoverfloweth, manba
Buni rahmat qilaman. Veb-dizaynga yangi im :)
qo'shib qo'ydi muallif bonsoy, manba

Yaxshi flexbox - bu eng oson yo'li

<div id='foo'>
 <div id='logo'></div>
 <div id='text'>Title HEre</div>
</div>

CSS:

#foo {
 display:flex;
 align-items:center;
}
0
qo'shib qo'ydi

Matn bilan harakat qilib ko'ring:

transform: translate(12px, 76px); //adjust it to fit your needs
0
qo'shib qo'ydi
Ha, X va Y qiymatlarini o'rtada yoki siz kerakli joyga qo'ying.
qo'shib qo'ydi muallif Nemus, manba
rahmat. Bu ishlaydi, lekin matnni to'g'ri tahrir qilsam, qadriyatlarni o'zgartirish kerak? Avtomatik ravishda o'rtada bo'ladimi?
qo'shib qo'ydi muallif bonsoy, manba

Agar siz HTML va CSS-dan foydalanayotgan bo'lsangiz, faqat matn va tasvir bir xil divda ekanligiga ishonch hosil qiling.

You can also follow this tutorial if that can make it easier: https://css-tricks.com/text-blocks-over-image/

0
qo'shib qo'ydi

Bir necha usul mavjud.

Ularning biri:

#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}
0
qo'shib qo'ydi