How to get the bottom of elements to match up in HTML / CSS

Question

Is it possible to align the bottom of all elements within a div together? I have a header div that will have my site name, as well as a small menu. The small menu has 3 links, which are all on the same level, but then I have an image and an svg tag (custom shopping cart points) that sit a little bit above the menu links. And the site title sits above all of the menu. My current code gives me this result:

Notice how the title is above the menu on the right and the facebook image and custom shopping car are above the menu? I would like the bottom of all those elements to match up. Is that possible?

This is my current code:

body {
  background-color: rgb(225, 225, 225);
  margin: 0px;
  padding: 0px;
}

div#header {
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 50px;
  margin: 0px;
  padding: 25px 0px 0px 0px;
  position: fixed;
  display: flex;
  justify-content: space-between;
}

.title {
  font-size: 20px;
  padding: 0px 0px 0px 50px;
}

.menu {
  font-size: 15px;
  padding: 0px 50px 0px 0px;
}

.menu a {
  padding: 0px 10px 0px 10px;
}

a {
  color: rgb(0, 0, 0);
  font-family: Sans-Serif;
  text-decoration: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Home | pc.bracelet</title>
  <link rel="stylesheet" type="text/css" href="index.css" />
</head>

<body>
  <div id="header">
    <span class="title"><a href="index.html">MYSITE</a></span>
    <span class="menu">
        <a href = "index.html">Home</a>
        <a href = "shop.html">Shop</a>
        <a style = "border:1px solid red;" href = "blog.html">Blog</a>
        <a target = "_blank" href = "http://www.facebook.com/pc.bracelet"><img style = "border:1px solid red;" src = "facebookf.png" alt = "Find Us On FaceBook"/></a>
        <a href = "checkout.html">
         <svg height = "25px" width = "30px" style="border:1px solid red;">
          <polyline points = "0,6 5,6 10,16 20,16 22,10" style="fill:none;stroke:black;stroke-width:1"/>
          <circle cx = "12" cy = "20" r = "1.5" stroke = "black" stroke-width = "1" fill = "black"/>
          <circle cx = "18" cy = "20" r = "1.5" stroke = "black" stroke-width = "1" fill = "black"/>
         </svg>
        </a>
       </span>
  </div>
</body>

</html>

I think the duplicate answer isn't the correct one. Here it's about aligning n child elements, the linked one is about aligning one text element, which technically is something different, and might not help the OP — Sascha, Apr 10 '18 at 08:21

score 1 · Answer 1 · answered Apr 10 '18 at 08:14

That's possible :)

Try and use flexbox on the .menu, to align it's children.

align-items: center; might do it already, but you can try around with bottom or baseline to decide which results in your desired layout.

edit: also added align-items: center; to #header for even more aligning.

body {
  background-color: rgb(225, 225, 225);
  margin: 0px;
  padding: 0px;
}

div#header {
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 50px;
  margin: 0px;
  padding: 25px 0px 0px 0px;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 20px;
  padding: 0px 0px 0px 50px;
}

.menu {
  font-size: 15px;
  padding: 0px 50px 0px 0px;
  display: flex; 
  align-items: center;
}

.menu a {
  padding: 0px 10px 0px 10px;
}

a {
  color: rgb(0, 0, 0);
  font-family: Sans-Serif;
  text-decoration: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Home | pc.bracelet</title>
  <link rel="stylesheet" type="text/css" href="index.css" />
</head>

<body>
  <div id="header">
    <span class="title"><a href="index.html">MYSITE</a></span>
    <span class="menu">
        <a href = "index.html">Home</a>
        <a href = "shop.html">Shop</a>
        <a style = "border:1px solid red;" href = "blog.html">Blog</a>
        <a target = "_blank" href = "http://www.facebook.com/pc.bracelet"><img style = "border:1px solid red;" src = "facebookf.png" alt = "Find Us On FaceBook"/></a>
        <a href = "checkout.html">
         <svg height = "25px" width = "30px" style="border:1px solid red;">
          <polyline points = "0,6 5,6 10,16 20,16 22,10" style="fill:none;stroke:black;stroke-width:1"/>
          <circle cx = "12" cy = "20" r = "1.5" stroke = "black" stroke-width = "1" fill = "black"/>
          <circle cx = "18" cy = "20" r = "1.5" stroke = "black" stroke-width = "1" fill = "black"/>
         </svg>
        </a>
       </span>
  </div>
</body>

</html>

score 0 · Answer 2 · answered Apr 10 '18 at 08:13

0

The svg is an inline-block element trying to match the baseline of your menu.

Just add a vertical-align:bottom; to the svg

answered Apr 10 '18 at 08:13

GuCier

6,919
1
29
36

How to get the bottom of elements to match up in HTML / CSS

2 Answers2