1

I'm working on a project in which a button and a link (styled to be indistinguisahable from each other) need to line up in a row. For some reason, my "Logout" button does not line up with my "Send" button. After a bit of experimentation, I've found that changing the "overflow" property seems to negate this effect a little bit. But I still haven't gotten it to work 100%. Can anyone give me any pointers for what's going on?

.send-or-logout { 
 text-align: center; 
 background-color: #fa913c;
}

.blue-button, .red-button  {
 border: none;
 margin: 10px;
 width: 200px;
 height: 50px;
 overflow: auto;
  white-space: nowrap; 
 text-overflow: ellipsis;
 overflow-wrap: break-word;
 font-size: 25px;
 text-transform: uppercase;
 color: #fafafa;
 border: 0;
 text-align: center;
}

.blue-button {
 background-color:#273557;
 display: inline-block;
}

.red-button {
 background-color: #f4440e;
 display: inline-block;
}
 <div class="container">
   <div class="row">
        <div class="col send-or-logout">
            <input class="blue-button"type="submit" name="submit" value="SEND" /><a
                href="./logout" class="red-button logout-button">LOGOUT</a>
        </div>
    </div>
Leia_Organa
  • 1,894
  • 7
  • 28
  • 48

1 Answers1

0

I recommend using vertical-align:top. See vertical-align.

The default value is baseline, which is what you're noticing.
See What's the deal with vertical-align: baseline?

I also suggest using padding rather than height.
Text in submit buttons is vertically centered while text in <a> elements is not.

.send-or-logout {
  text-align: center;
  background-color: #fa913c;
}

.blue-button,
.red-button {
  display: inline-block;
  vertical-align: top;
  border: none;
  width: 200px;
  margin: 10px;
  padding: 0.5em 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  font-size: 25px;
  color: #fafafa;
  cursor: pointer;
}

.blue-button {
  background-color: #273557;
}

.red-button {
  background-color: #f4440e;
}
<div class="container">
  <div class="row">
    <div class="col send-or-logout">
      <input class="blue-button" type="submit" name="submit" value="SEND" /><a href="./logout" class="red-button logout-button">LOGOUT</a>
    </div>
  </div>
showdev
  • 28,454
  • 37
  • 55
  • 73