如何使用CSS内联元素

Question

I'm trying to make menubar at the top of my website. It should looke like this:

The red square is my button.

My problem is that my headline and my button are not in the same line. So I tried to use a table but then there are both aligned to the left. After that I used float: right; for my button. It is now aligned right but in the next line.

How can I fix it so my button and my headline are in the same line and aligned like my picture.

HTML:

<div id="topbar">
   <h1>Fahrplan</h1>
   <button type="button" id="settings"></button>
</div>

CSS:

h1 {
  height: 44px;
  margin: 0;
  color:#FFFFFF;
  text-align: center;
  font-family: Helvetica, sans-serif;
  font-size: 16px; 
  line-height: 44px;
}
#topbar button {
  height: 20px;
  width: 20px;
  float: right;
}

Answer 1

For this kind of scenarios, you might consider using position s.

 #topbar { position: relative; } h1 { margin: 0; color:#FFFFFF; text-align: center; font-family: Helvetica, sans-serif; font-size: 16px; line-height: 44px; background: #99f; } #topbar button { height: 20px; width: 20px; position: absolute; top: 50%; right: 5px; margin-top: -10px; } 

 <div id="topbar"> <h1>Fahrplan</h1> <button type="button" id="settings"></button> </div> 

Here I have given position to both #topbar and the button. The #topbar has a relative position and button has an absolute position:

#topbar {
  position: relative;
}
button {
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -10px;
}

And I have also adjusted the button to be vertically centred by using the negative margin of half the height. Hope this helps.

Answer 2

I would rather suggest you to use absolute along with translateY() to align your button vertically middle.

Demo (Note: Am using SCSS on jsFiddle so don't get confused with the syntax)

header {
  height: 40px;
  background: tomato;
  position: relative;

  h4 {
    line-height: 40px;
    text-align: center;
  }

  button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
  }
}

Explanation:

I am using position: absolute; to move your button to the right. As far as vertical centering goes for your button, you can use top: 50% and transform to nudge your button exactly in the middle of your header vertically. It will always stay vertically centered without you declaring any static height .

Answer 3

For your interest, here's how to do it with inline-blocks.

 div > * { display:inline-block; vertical-align:middle; } h1 { width:100%; text-align:center; margin-right:-40px; background-color:#4F81BD; color:#FFF; font-family: Helvetica, sans-serif; font-size: 16px; height: 44px; } button { height: 30px; width: 30px; margin-right:-6px; border: 3px solid #8C3836; border-radius:5px; background-color:#C0504D; } 

 <div id="topbar"> <h1>Fahrplan</h1> <button type="button" id="settings"></button> </div> 

Answer 4

Here is a quick demo of how to do this using http://tachyons.io

<div class="bg-light-gray dt w-100">
  <div class="dtc v-mid w3"></div>
  <div class="dtc v-mid tc pv3">
    <h1 class="mv0 f5">Headline</h1>
  </div>
  <div class="dtc v-mid tr w3 pr2">
    <button class="bg-black br2 h2 w2"></button>
  </div>
</div>

CSS: .br2 { border-radius: .25rem; }

.dt {
  display: table;
}

.dtc {
  display: table-cell;
}

.h2 {
  height: 2rem;
}

.w2 {
  width: 2rem;
}

.w3 {
  width: 4rem;
}

.w-100 {
  width: 100%;
}

.bg-black {
  background-color: #111;
}

.bg-light-gray {
  background-color: #eee;
}

.pr2 {
  padding-right: .5rem;
}

.pv3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.mv0 {
  margin-top: 0;
  margin-bottom: 0rem;
}

.tr {
  text-align: right;
}

.tc {
  text-align: center;
}

.f5 {
  font-size: 1rem;
}

.v-mid {
  vertical-align: middle;
}

Demo: https://jsfiddle.net/r21mdrzs/

The downside is that you include an empty div. The plus side is that even if you zoom in or out, change font-size or size of button, everything will always be aligned to the middle, not matter what. This is in my experience is less brittle than using magic number values for positioning.

Answer 5

Give your headline float property;

.classNameGiveToHeading {
  float: left;
}
.buttonClassName {
  float: right;
}

give "float:right" to both of them as you like.