How to align divs and buttons when multiple font sizes are used?

user_13516162 0
Viewed 198

I need to have a button that activates a slide down menu and a div that has a link in it, in a nav bar, the button and the link have a name and a small line of text underneath. I want the small line of text to be a smaller font. If I put the line of text in a p tag and specify a smaller font, I cannot get the text to align within them neatly.

I can use padding on the link to push it down, but when I start using media queries to make things smaller, they fall out of alignment. I have also tried using line height but have similar problems. I can go through all the media queries adjusting padding/line height slightly to get alignment, but obviously this is not fixing the problem, just creating a messy solution.

If I remove the font size on the small line of text, they align properly. Can someone help me understand the cause of why using different font sizes cause the alignment of the text in a button and div to change differently and suggest a solution so they align easily and consistently when I resize other properties such as the height of both. Thanks

.main-menu-button{ 
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  float:left;
  position:relative;
  font-weight: 600; 
  font-size: 16pt;
  height:50px;
  top:25px;
  line-height: 3pt;  
  z-index:10;
  background-color: white;
  border: 1px solid green;
}

.main-menu-link{
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  float: left;
  position:relative;
  font-weight: 600;  
  font-size: 16pt;

  height:50px;
  width:120px;
  top:25px;

  line-height: 3pt;
  z-index:10;
  text-align: center;
  border:solid 1px black;
}

/* if you remove font size in the p tag, the text aligns, but I want this below*/

p {
  font-size:8pt;
}
<html>
    <button class="main-menu-button">My button<p>bit of text</p></button>
    <div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
</html>

css html
3 Answers
  1. Removed lineheight from both
  2. Removed margin from p
  3. Added margin to div for the button*

Step 3 would be better if you use only divs or only buttons though. 

.main-menu-button{ 
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  float:left;
  position:relative;
  font-weight: 600; 
  font-size: 16pt;
  height:50px;
  top:25px;
  z-index:10;
  background-color: white;
  border: 1px solid green;
}

.main-menu-link{
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  float: left;
  position:relative;
  font-weight: 600;  
  font-size: 16pt;
  padding-top: 5px;
  height:50px;
  width:120px;
  top:25px;
  z-index:10;
  text-align: center;
  border:solid 1px black;
}

/* if you remove font size in the p tag, the text aligns, but I want this below*/

p {
  font-size:8pt;
  margin: 0;
}
<html>
    <button class="main-menu-button"><span>My button</span><p>bit of text</p></button>
    <div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
</html>

user_95683580

button are a bit special and there is a default center alignment applied to them. You need to do the same with the div

.main-menu-button,
.main-menu-link {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction:column;
  vertical-align: top;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 16pt;
  height: 50px;
  line-height: 3pt;
  width: 120px;
  background-color: white;
  border: 1px solid green;
  justify-content:center;
  align-items:center;
}

p {
  font-size: 8pt;
  margin-bottom:0;
}
<button class="main-menu-button">My button<p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a>
  <p>bit of text</p>
</div>

user_86203330 

.wrapper {
  display: flex;
}

.wrapper > * {
  margin-right: 5px;
  padding: 5px 10px;
}

.main-menu-button{ 
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600; 
  font-size: 16pt;
  background-color: white;
  border: 1px solid green;
}

.main-menu-link{
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;  
  font-size: 16pt;
  width:120px;
  text-align: center;
  border:solid 1px black;
}

/* if you remove font size in the p tag, the text aligns, but I want this below*/

p {
  font-size:8pt;
  margin: 0;
}
<html>
<div class="wrapper">
    <button class="main-menu-button"><span>My button</span><p>bit of text</p></button>
    <div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
    </div>
</html>

What is happening here?

Added a wrapper for both elements and given display: flex;

You don't need the height property for inner elements anymore since flex parent's children by default will be of same height.

user_81562870
Related