Выравнивание изображения и текста в той же строке

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

<head> 
    .header img{ 
     float: left; 
     width: 2px; 
     height: 3px; 
     background: #555; 
    } 
    .header h1{ 
     position: relative; 
     top: 18px; 
     left: 10px; 
    } 

    <title> home page </title> 
</head> 
<body> 

    <div class="header"> 
     <img src="greenlock.jpg" alt="logo" /> 
     <h1> UNIVERCITY OF GREENLOCK <h1>   
    </div>

источник

2016-07-06 asiri attanayake

Вы можете просто удалить позиционирование (и поплавок) и отобразить их как элементы встроенного блока – VilleKoo

использование display : inline-block

.header img{ 
 
       display:inline-block; 
 
       width:10px; 
 
       height:3px; 
 
       background:#555 
 

 
    } 
 
    .header h1{ 
 
       display:inline-block; 
 
       position: relative; 
 
    }

<div class="header"> 
 
<img src="greenlock.jpg" alt="logo" /> 
 
<h1> UNIVERCITY OF GREENLOCK <h1>   
 
</div>

вы также можете использовать float:left для изображения и float:right к заголовку

.header img{ 
 
       float:left; 
 
       width:10px; 
 
       height:3px; 
 
       background:#555 
 

 
    } 
 
    .header h1{ 
 
       flaot:right; 
 
       position: relative; 
 
    }

<div class="header"> 
 
<img src="greenlock.jpg" alt="logo" /> 
 
<h1> UNIVERCITY OF GREENLOCK <h1>   
 
</div>

источник

2016-07-06 08:24:34

спасибо, что это сработало. (y) –

не проблема :) рада помочь, может быть, вы можете принять ответ сейчас? : P –

Пожалуйста, попробуйте этот код:

.header img{ 
    width:2px; 
    height:3px; 
    background:#555; 
    vertical-align: middle; 

} 
.header h1{ 
    display: inline-block; 
    vertical-align: middle; 
}

источник

2016-07-06 08:27:21 vignesh

Я не мог понять, что вы пытаетесь сказать? – vignesh

В такой ситуации, когда изображение является по существу часть заголовка, я бы образ, который сидит рядом с <h1>, а не как <img> на всех, но а правило по background стиль применяется к <h1>:

h1 { 
 
margin: 18px 0 0 10px; 
 
padding-left: 30px; 
 
font-size: 16px; 
 
line-height: 24px; 
 
text-transform: uppercase; 
 
background: url('http://placehold.it/24x24') no-repeat left top rgb(255,255,255); 
 
}

<header> 
 
<h1>University of Greenlock</h1>   
 
</header>

источник

2016-07-06 08:43:15 Rounin

благодарю вас за вашу помощь. –

Добро пожаловать, @asiri. Если вы хотите, пожалуйста, примите ответ выше. В качестве альтернативы, если у вас возникнут дополнительные вопросы, спросите меня, и я сделаю все возможное, чтобы помочь. – Rounin

Выравнивание изображения и текста в той же строке

ответ

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