css position a span with background in div in center and middle

Question

I've tried to put a minimal solution together for this. I want to be able to center a span that has a background image (svg) within a div that has the border radius set to give a rounded icon effect.

This looks like the following:

This has been put together with the following:

body {
  background-color: greenyellow;
}

.demo-icon {
  display: inline-block;
  border-radius: 50%;
  background-color: white;
  position: relative;
  overflow: hidden;
  height: 64px;
  width: 64px;
}

.demo-icon .icon {
  text-align: center;
  vertical-align: middle;
}

.icon {
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  height: 48px;
  width: 48px;
  background-color: red;
  vertical-align: middle;
}

.icon-form {
  background-image: url(./form.svg);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Align you £!£!££</title>
</head>

<body>
  <div class="demo-icon">
    <span class="icon icon-form"></span>
  </div>
</body>

</html>

What do I need to do to get the span containing the svg to align in the center middle?

what do you want actually is center `demo-icon` this whole `div` let me know — Umutambyi Gad, Jul 05 '20 at 16:30
@Gad - yes, center the `span icon icon-form` in the `div demo-icon`. — andrewthedev, Jul 05 '20 at 18:58

score 3 · Accepted Answer · answered Jul 05 '20 at 16:33

You can try with display:inline-flex;

body {
  background-color: greenyellow;
}

.demo-icon {
  /* added */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /****/
  border-radius: 50%;
  background-color: white;
  position: relative;
  overflow: hidden;
  height: 64px;
  width: 64px;
}

.demo-icon .icon {
  text-align: center;
  vertical-align: middle;
}

.icon {
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 48px;
  width: 48px;
  background-color: red;
  vertical-align: middle;
}

.icon-form {
  background-image: url(./form.svg);
}

<div class="demo-icon">
  <span class="icon icon-form"></span>
</div>

score 3 · Answer 2 · answered Jul 05 '20 at 16:34

you can try flex box because it mostly used in layouts of element and make it easy

body {
  background-color: greenyellow;
}

.demo-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: white;
  position: relative;
  overflow: hidden;
  height: 64px;
  width: 64px;
}

.demo-icon .icon {
  text-align: center;
  vertical-align: middle;
}

.icon {
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  height: 48px;
  width: 48px;
  background-color: red;
  vertical-align: middle;
}

.icon-form {
  background-image: url(./form.svg);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Align you £!£!££</title>
</head>

<body>
  <div class="demo-icon">
    <span class="icon icon-form"></span>
  </div>
</body>

</html>

css position a span with background in div in center and middle

2 Answers2