Выравнивание заголовков

120

07 мая 2021, 00:30

Как сделать, чтобы заголовки были на одном уровне друг под другом ? Я понимаю,что причина в том,что разный размер картинок.Но если я делаю одинаковый размер для них,то у картинки теряется качество. Как решить данную проблему ? Может быть картинку в одну строку надо ставить не таким образом, а как-нибудь иначе ?

.feature__title-second{ 
	font-family: 'Roboto', sans-serif; 
	font-size: 16px; 
	color: #0f5f5c; 
	display: inline-block; 
    margin-left: 22px; 
} 
 
.feature__text-second{ 
	font-family: 'Roboto', sans-serif; 
	font-size: 14px; 
	color: #83a7a5; 
	line-height: 22px; 
	width: 513px; 
	margin-top: 20px; 
}

<div class="row"> 
         <div class="col-lg-6"> 
           <div class="feature__block-second"> 
              <img src="img/icon4.png" alt="icon" class="feature__icon "> 
             <h3 class="feature__title-second"> 
                Cross Browser Compatibility 
             </h3> 
             <p class="feature__text-second"> 
               Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. 
             </p> 
           </div> 
         </div> 
         <div class="col-lg-6"> 
           <div class="feature__block-second"> 
              <img src="img/icon5.png" alt="icon" class="feature__icon "> 
             <h3 class="feature__title-second"> 
                Cross Browser Compatibility 
             </h3> 
             <p class="feature__text-second"> 
               Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. 
             </p> 
           </div> 
         </div> 
         <div class="col-lg-6"> 
           <div class="feature__block-second"> 
              <img src="img/icon6.png" alt="icon" class="feature__icon "> 
             <h3 class="feature__title-second"> 
                Cross Browser Compatibility 
             </h3> 
             <p class="feature__text-second"> 
               Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. 
             </p> 
           </div> 
         </div> 
         <div class="col-lg-6"> 
           <div class="feature__block-second"> 
              <img src="img/icon7.png" alt="icon" class="feature__icon "> 
             <h3 class="feature__title-second"> 
                Cross Browser Compatibility 
             </h3> 
             <p class="feature__text-second"> 
               Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. 
             </p> 
           </div> 
         </div> 
         
       </div>

Answer 1

Как писал в комменте, засылаю пример кода. На место иконок - подставьте свои, без указывания ширины. Ширина в .ico должна быть по самой большой иконке.

.feature__title-second{ 
	font-family: 'Roboto', sans-serif; 
	font-size: 16px; 
	color: #0f5f5c; 
	display: inline-block; 
    margin-left: 22px; 
} 
 
.feature__text-second{ 
	font-family: 'Roboto', sans-serif; 
	font-size: 14px; 
	color: #83a7a5; 
	line-height: 22px; 
	width: 513px; 
	margin-top: 20px; 
} 
 
.ico { 
  display: inline-block; 
  width: 30px; 
  text-align: center; 
}

<div class="row"> 
         <div class="col-lg-6"> 
           <div class="feature__block-second"> 
           <div class="ico"> <img src="https://image.flaticon.com/icons/png/128/70/70358.png" style="width: 30px" alt="icon" class="feature__icon "></div> 
             <h3 class="feature__title-second"> 
                Cross Browser Compatibility 
             </h3> 
             <p class="feature__text-second"> 
               Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. 
             </p> 
           </div> 
         </div> 
         <div class="col-lg-6"> 
           <div class="feature__block-second"> 
              <div class="ico"> 
               
              <img src="https://image.flaticon.com/icons/png/128/70/70358.png" style="width: 10px" alt="icon" class="feature__icon "> 
              </div> 
             <h3 class="feature__title-second"> 
                Cross Browser Compatibility 
             </h3> 
             <p class="feature__text-second"> 
               Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. 
             </p> 
           </div> 
         </div> 
         
 
</div>

Создание эксклюзивного проекта в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Выравнивание заголовков

Как выровнять по центру div

textarea javascript

Ошибки в функции - Unity

Неочевидное поведение блока using в C#