Centering an image (svg) vertically inside a link tag

Question

Centering an image (svg) vertically inside a link tag

I've been struggling to vertically center the config button (#config) and none of the options I've tried worked the way I wanted. Here is a link to my CodePen:

http://codepen.io/fenwil/pen/ONRXwz

Here is the crucial part of the code that needs modification:

HTML

<header id="cabecera">
    <img id="logo" alt="Mayor Igual a Siete" src="http://imgh.us/logo_207.svg">
    <h3 id="user">Username</h3>
    <a href="perfil.html"><img alt="Configuracion" src="http://imgh.us/config.svg" id="config"></a>
</header>

CSS

#config {
    transition: all 0.5s ease;
    height: 20px;
    width: 20px;
}

Appreciate any help in advance! And if there are other issues you spot, please let me know!

html css svg

Answer 1

Answer №1

What happens when you introduce a new line like this?

#customize{
  padding-top: 20px;
}

Answer 2

What happens when you introduce a new line like this?

#customize{
  padding-top: 20px;
}

Answer 3

Answer №2

To achieve the desired layout, it is recommended to remove floats and instead use display:inline-block along with vertical-align:middle.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html {
  font-family: 'Roboto', sans-serif;
  height: 100%;
  overflow-y: hidden;
}
a {
  text-decoration: none;
}
#cabecera {
  text-align: right;
  margin-top:50px; /* for demo only */
}
#cabecera,
a {
  color: #FFFFFF;
}
#cabecera {
  background-color: #393E46;
  line-height: 50px;
  height: 50px;
}
#cabecera * {
  margin: 0px 4px 0px 4px;
}
#user,
#config {
  display: inline-block;
  vertical-align: middle;
}
#logo {
  height: 50px;
  width: 55px;
  float: left;
}
#config {
  transition: all 0.5s ease;
  height: 20px;
  width: 20px;
}
#config:hover {
  transform: rotate(90deg);
}
#user {
  font-weight: 100;
  font-size: 18px;
}

<header id="cabecera">
  <img id="logo" alt="Mayor Igual a Siete" src="http://imgh.us/logo_207.svg">
  <h3 id="user">Username</h3>
  <a href="perfil.html">
    <img alt="Configuracion" src="http://imgh.us/config.svg" id="config">
  </a>
</header>

Answer 4

To achieve the desired layout, it is recommended to remove floats and instead use display:inline-block along with vertical-align:middle.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html {
  font-family: 'Roboto', sans-serif;
  height: 100%;
  overflow-y: hidden;
}
a {
  text-decoration: none;
}
#cabecera {
  text-align: right;
  margin-top:50px; /* for demo only */
}
#cabecera,
a {
  color: #FFFFFF;
}
#cabecera {
  background-color: #393E46;
  line-height: 50px;
  height: 50px;
}
#cabecera * {
  margin: 0px 4px 0px 4px;
}
#user,
#config {
  display: inline-block;
  vertical-align: middle;
}
#logo {
  height: 50px;
  width: 55px;
  float: left;
}
#config {
  transition: all 0.5s ease;
  height: 20px;
  width: 20px;
}
#config:hover {
  transform: rotate(90deg);
}
#user {
  font-weight: 100;
  font-size: 18px;
}

<header id="cabecera">
  <img id="logo" alt="Mayor Igual a Siete" src="http://imgh.us/logo_207.svg">
  <h3 id="user">Username</h3>
  <a href="perfil.html">
    <img alt="Configuracion" src="http://imgh.us/config.svg" id="config">
  </a>
</header>

Answer 5

Answer №3

For easy centering of any element:

.container
{
    position: relative;
}

.element
{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Remove unnecessary directions

Explanation: Using top/left percentage positioning adjusts based on the size of the parent container, shifting the upper left corner of the inner element to the center of the parent. To perfectly center the element, utilize transform: translate with -50% to adjust based on the element's own size resulting in a precise center alignment.

Answer 6

For easy centering of any element:

.container
{
    position: relative;
}

.element
{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Remove unnecessary directions

Explanation: Using top/left percentage positioning adjusts based on the size of the parent container, shifting the upper left corner of the inner element to the center of the parent. To perfectly center the element, utilize transform: translate with -50% to adjust based on the element's own size resulting in a precise center alignment.

Centering an image (svg) vertically inside a link tag

Answer №1

Answer №2

Answer №3

Similar questions

Incorporating multidimensional arrays into the `<input type=checkbox>` element

output a string from the write_html function in plotly

Create two floating divs that adjust their height dynamically to be equal

Creating SVG Symbol Sprites with linearGradient

Discover the nodes with the highest connections in a D3 Force Graph

Passing the value in a td element to a JavaScript function using Thymeleaf onClick

What is the best practice for incorporating CSS and JavaScript files into a PHP template?

The stacking order of React components

What is the best way to incorporate text below grid columns in html?

What is the best way to ensure that the child flex box matches the height of the parent flex box by 100%?

Why is inner HTML returning input/textbox instead of the value?

Steps for creating a tileView from scratch

Display a fresh <p> tag when the condition in the if-statement is met

Display a series of numbers in a stylish Bootstrap button with uniform dimensions

How can I prevent dataTable resizing?

VueJS can manipulate an inline template by dynamically changing its content and reinitializing

What is the best way to ensure that two contact fields are capable of adapting

Is there a way for me to manually designate certain domains with the rel="follow" attribute while assigning all other external links with the rel="nofollow" attribute?

How can one locate a particular element/style/class in the dev tools DOM while debugging in MUI v5?

PHP code isn't showing any posts