Как сделать заголовок с изображением и текстом по горизонтали?

Question

У меня есть изображение и текст. Мне нужен текст, следующий за изображением подряд. И после выравнивания как бок о бок, так и [image] Time tracker, сделайте оба изображения по горизонтали в центре экрана как заголовок текущей страницы. То, что я пытался сделать, приводится ниже.

<div class="row"> 
     <div class="col-80 col-offset-10"> 

      <div class="appheadingcenter"> 

      <img src="img/clock.png" alt="clock" class="clockwidth"></img> 
      <div class="timesheettext2"> 
       <h1 class="timesheettext"> 
       <b>Timesheet Tracking</b> 
       </h1> 
      </div> 
      </div> 

     </div> 

     </div> 

Answer 1

Просто укажите следующие css. display:flex сделает изображение и текст бок о бок, а justify-content: center; сделает его горизонтально центром.

.appheadingcenter { 
    display: flex; 
    justify-content: center; 
} 

Answer 2

<div class="appheadingcenter" style="margin:auto;width:454px;"> 
 

 
       <img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png" 
 
     alt="clock" class="clockwidth" style="float: left;max-width: 100px;max-height: 100px;"> 
 
       <div class="timesheettext2" style="width: 341px;float: left;"> 
 
        <h1 class="timesheettext"> 
 
        <b>Timesheet Tracking</b> 
 
        </h1> 
 
       </div> 
 
    </div> 
 
\t

Обновлено Ответ

Если вы не хотите, чтобы установить ширину, то используйте ниже раствор

<div class="appheadingcenter" style="text-align:center;"> 
 

 
     <div style="display: inline-block;"> 
 
       <img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png" 
 
     alt="clock" class="clockwidth" style="float: left;max-width: 100px;max-height: 100px;"> 
 
       <div class="timesheettext2" style="width: 341px;float: left;"> 
 
        <h1 class="timesheettext"> 
 
        <b>Timesheet Tracking</b> 
 
        </h1> 
 
       </div> 
 
       </div> 
 
    </div>

Answer 3

здесь является метод с использованием display: flex;

Примечание: нажмите полную страницу, чтобы увидеть более широкую картину этой демонстрации

\t .header-frame { 
 
\t \t display: flex; 
 
\t \t align-items: center; 
 
     top: 50%; 
 
     left: 50%; 
 
     position: absolute; 
 
     transform: translate(-50%, -50%); 
 
\t } 
 

 
\t .image-frame { 
 
\t \t display: inline-block; 
 
\t \t background: url("https://bobagaming.files.wordpress.com/2015/10/league-of-legends-world-championship-logo-eps-vector-image.png") no-repeat center; 
 
\t \t width: calc(4vw + 4vh); 
 
\t \t height: calc(4vw + 4vh); 
 
\t \t background-size: cover; 
 
\t } 
 

 
\t .text-frame { 
 
\t \t font-family: 'Arial'; 
 
\t \t font-size: calc(2.5vw + 2.5vh); 
 
\t \t display: inline-block; 
 
\t \t margin: 1vh 1vw; 
 
\t }

<div class="header-frame"> 
 
\t <span class="image-frame"></span> 
 
\t <h3 class="text-frame">World Championships</h3> 
 
</div>