0

If you click on my header (jsfiddle below), a new div will slide down with text in it, and if you click the close button, it will close. My problem is that the header and the close button are not on the same line or there is unwanted or unequal space between the borders and the element(s). (maybe because they do not have the same font size?)

jsfiddle: https://jsfiddle.net/0hgo69s1/ Chrome Inspector: https://prnt.sc/mob4t7

.con {
  width: 40%;
  color: black;
  border: 1px solid black;
  transition: ease all 0.2s;
}

.con:hover {
  border: 1px solid limegreen;
}

.header,
.close {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

.header {
  width: 90%;
  color: black;
  font-size: 14px;
  text-transform: uppercase;
  font-family: 'Open Sans';
}

.close {
  width: 10%;
  color: black;
  font-size: 18px;
  font-family: 'Open Sans';
}

.close:hover {
  color: red;
}
<div class="con"><!--
   --><div onclick='alert("open")' class="header">HEADER</div><!--
   --><div onclick='alert("close")' class="close">&times;</div><!--
 --></div>

In order to vertically center them i tried:

  • using flex display, and setting line height,
  • adding margin and padding to equalize the distance
  • setting a specific height to both
hungerstar
  • 21,206
  • 6
  • 50
  • 59
Balázs
  • 15
  • 2

2 Answers2

3

The .header and .close divs both have different font sizes (18px) and (14px) respectively. If you use vertical-align: middle on both elements they should match.

Alternatively, using display: flex and align-items: center on the container will achieve the same.

Thomas
  • 68
  • 7
  • 1
    Additionally: Match the casing. Make the "x" uppercase ("X") like "HEADER" to save you some trouble. Otherwise, you'd have to play with line-height which is not 100% consistent across browsers to begin with. – Kalnode Feb 22 '19 at 15:38
0

Add this two lines to your .con element

.con {
   display: flex;
   align-items: center;
}

https://jsfiddle.net/fcqmkxe2/6/

marcinstl
  • 65
  • 1
  • 8