0

I want to centre some text vertically in a span which contains an SVG Image. Below is a snippet of my code and you can see the text is aligned to the top of the SVG whereas I want it aligned to the centre. How can I do this? I tried using vertical-align: middle; but this made no difference.

* {
  margin: 0;
  padding: 0;
}
html,
body {
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
}
.bottom-wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0.5%;
  margin-left: 0.5%;
  margin-right: 0.5%;
}
.widgets {
  float: left;
  width: 87%;
}
#settings {
  width: 13%;
  margin-top: 5%;
}
#settings > span {
  /* Container */
  float: left;
  width: 100%;
  margin-top: 3%;
}
#settings > span > div {
  /* SVG */
  float: left;
  height: 20%;
  width: 20%;
}
#settings > span > p {
  /* Text */
  float: left;
  height: 20%;
  width: 20%;
  margin-left: 5%;
  font-size: 1.2vw;
}
<div class="bottom-wrapper">
  <div class="widgets">Place Holder</div>
  <div class="widgets" id="settings">
    <span id="setting1">
            <div id="setting1-light">
                <!--?xml version="1.0" encoding="UTF-8"?-->
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30" xml:space="preserve" id="settingsLight">
                    <circle id="settingsLight-oval" stroke="rgb(32, 33, 32)" stroke-width="5" fill="rgb(47, 222, 107)" cx="15" cy="15" r="12.5"></circle>
                </svg>
            </div>
            <p id="setting1-text">Setting1</p>
        </span>
    <span id="setting2">
            <div id="setting2-light">
                <!--?xml version="1.0" encoding="UTF-8"?-->
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30" xml:space="preserve" id="settingsLight">
                    <circle id="settingsLight-oval" stroke="rgb(32, 33, 32)" stroke-width="5" fill="rgb(222,58,62)" cx="15" cy="15" r="12.5"></circle>
                </svg>
            </div>
            <p id="setting2-text">Setting2</p>
        </span>
  </div>
</div>
Kian Cross
  • 1,818
  • 2
  • 21
  • 41

3 Answers3

2

I think the best way is to use vertical-align like you tried. For that you need to use display: inline-block. You can read more about that here

Example:

#settings > span > div {
  /* SVG */
  display: inline-block;
  height: 20%;
  width: 20%;
  vertical-align: middle;
}
#settings > span > p {
  /* Text */
  display: inline-block;
  height: 20%;
  width: 20%;
  margin-left: 5%;
  font-size: 1.2vw;
}

Codepen: http://codepen.io/anon/pen/qbBwoL

Why is better to use inline-block? Advantages of using display:inline-block vs float:left in CSS

Community
  • 1
  • 1
radubogdan
  • 2,744
  • 1
  • 19
  • 27
1

Use line-height instead of height:

#settings > span > p {
    float: left;
    height: 20%;
    width: 20%;
    margin-left: 5%;
    font-size: 1.2vw;
    line-height: 18px;
}
l3est
  • 407
  • 2
  • 4
  • 16
1

Here's one way:

#settings > span {
    float: left;
    width: 100%;
    margin-top: 3%;
    position: relative; /* NEW */
}

#settings > span > p {
    /* float: left; */
    height: 20%;
    width: 20%;
    margin-left: 5%;
    font-size: 1.2vw;
    position: absolute;  /* NEW */
    top: 23%;  /* NEW */
    left: 20%;  /* NEW */
}

DEMO

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • In your demo it doesn't seam to be centred? https://i.gyazo.com/deac6f108d73786ddab3cd43bc922062.png – Kian Cross Dec 06 '15 at 16:27
  • It's a simple adjustment to the `top` property. I already revised code and demo. Try again. – Michael Benjamin Dec 06 '15 at 16:28
  • It still does't look centre I don't think ([here](https://i.gyazo.com/cfff7df774bdc4f25b2f258eacc6b627.png)). Which part would I change to make it more centre? And would doing it this way auto adjust if the screen was resized? Thanks. – Kian Cross Dec 06 '15 at 16:33
  • 1
    It looks pretty centered to me. And it's responsive. Adjust the `top` and `left` properties in the demo to adjust the vertical and horizontal alignment, respectively. – Michael Benjamin Dec 06 '15 at 16:40