Почему мои элементы не выравниваются правильно

Question

Я пытаюсь создать сайт для своей компании, но у меня возникла проблема с позиционированием логотипа и элементов p. Я бы хотел, чтобы они отображались на одной строке, но она не совсем работает, как я этого хотел. Вот мой HTML:

<header class="mainHeader"> 
     <div class="imageholder"><a href="index.html"><img src="img/logo.png" alt="logo" title="Detect Fire and Security Worthing Logo"/></a></div> 
     <div class="textholder"><h2 class="number" style="color: #FFF"><p>admin@detect-fs.co.uk</p><p>01903 659 245</p></h2></div> 

     <nav> 
      <ul> 
       <li class="active"><a href="index.html">Home</a></li> 
       <li><a href="intruder_alarms.html">Intruder Alarms</a></li> 
       <li><a href="cctv.html">CCTV</a></li> 
       <li><a href="fire_alarms.html">Fire Alarms</a></li> 
       <li><a href="contact.html">Contact</a></li> 
       <li><a href="about.html">About Us</a></li> 
      </ul> 
     </nav> 
    </header> 

и мой CSS:

.imageholder { 
    position: relative; 
    display: inline; 
    width: 50%; 
} 

.textholder { 
    text-align: right; 
    display: inline; 
    width: 50%; 
    line-height: 20%; 
    position: relative; 
} 

.mainHeader img { 
    width: 30%; 
    height: auto; 
    margin: 2% 0 0 0; 
    display: inline; 
} 

Я подумал, что если две дивы, imageholder и textholder, были шириной 50% он будет работать, но что же тогда происходит это высота логотипа составляет 50%, что я не хочу, но после этого я не могу увеличить высоту.

Answer 1

Попробуйте

.textholder *{ 
    display: inline; 
} 

скрипку: https://jsfiddle.net/fj1hn19c/

Answer 2

Казалось бы, что высота изображения масштабирования с его соотношением сторон таким образом, когда ширина увеличивается, поэтому высота.

Для решения этой проблемы вы можете использовать стиль CSS max-height, но в зависимости от соотношения сторон изображения он может растягиваться и пикселизовать. Вы также можете установить max-width для изображения, чтобы оно не растягивалось дальше того, что вы хотели бы.

Кроме того, если вы хотите, чтобы эти элементы для выравнивания как блочные элементы, то я предложил бы использовать display: inline-block в отличие от display: inline

Изображение рассогласования будет дальше поможет нам увидеть проблему так же, как вы делаете ,

Answer 3

Ной, трудно ответить на этот вопрос без дополнительной информации, например. Я не вижу, что элемент контейнера «mainheader» находится внутри и что это CSS, и что такое тэг абзаца css?

Есть несколько вещей, которые я могу предложить на основе информации, которую вы предоставили, хотя:

Один закодировать ваш textholder.p CSS, чтобы иметь нулевые поля:

margin-top: 0; 
margin-bottom:0; 

браузеры автоматически добавить пустую строку до и после абзаца, который может быть частью проблемы.

Во-вторых, проверьте настройки отступов, полей, строк и плавающих в CSS для любого элемента-родителя/контейнера «mainheader».