how to adjust a div in the middle of the page

Question

picture of the questionmark next to the text (can't post pictures yet)

the questionmark is a bit lower than the "Status Update" text and I want to align it, but i don't know how. The css and html is here:

.qmarkCircle {
  border-radius: 50%;
  width: 0.8em;
  height: 0.8em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 2px !important;
  margin-left: 5px;
  background: #fff;
  border: 1px solid #666;
  color: #666;
  font: 0.8em Arial, sans-serif;
  font-weight: bold;
  box-sizing: initial;

  &:hover,
  &:after{
    content: "?" !important;
  }
}


<header>
 <h3 class="dashboard-teaser-title">{{ 'home.status-title' | translate }} 
 </h3>
 <div class="qmarkCircle tooltip is-tooltip-multiline" data-tooltip="Change your status according to your current availability. You can also add a note to your status. If you chose to hide your profile, you can still use the platform for all the other activity.">
 </div>
</header>

hope this is enough

please add relevant working code. – Dhruvi Makvana Nov 06 '20 at 15:05 — Dhruvi Makvana, Nov 06 '20 at 15:05
i got now the html and the css anything else needed? – Barnabas Nov 06 '20 at 15:06 — Barnabas, Nov 06 '20 at 15:06
text-align: center isn't working – Barnabas Nov 06 '20 at 15:07 — Barnabas, Nov 06 '20 at 15:07

score 2 · Answer 1 · answered Nov 06 '20 at 15:16

flex or grid might help :

here is a flex example:

.qmarkCircle {
  border-radius: 50%;
  width: 0.8em;
  height: 0.8em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 2px !important;
  margin-left: 5px;
  background: #fff;
  border: 1px solid #666;
  color: #666;
  font: 0.8em Arial, sans-serif;
  font-weight: bold;
  box-sizing: initial;
}

.qmarkCircle:hover:after {
  content: "?" !important;
}

header {
  display: flex;
  height: 100vh;
  background: gray;
  align-items: center;
  justify-content: center;
}

body {
  margin: 0;
}


}

<header>
  <h3 class="dashboard-teaser-title">{{ 'home.status-title' | translate }}
  </h3>
  <div class="qmarkCircle tooltip is-tooltip-multiline" data-tooltip="Change your status according to your current availability. You can also add a note to your status. If you chose to hide your profile, you can still use the platform for all the other activity.">
  </div>
</header>

score 1 · Answer 2 · answered Nov 06 '20 at 15:14

h3 and div are not inline elements by default. So, first you need to make them inline, then any stylings will work on it.

h3 {
display: inline;
}

.qmarkCircle {
  display: inline;
  vertical-align: middle;
  border-radius: 50%;
  width: 0.8em;
  height: 0.8em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 2px !important;
  margin-left: 5px;
  background: #fff;
  border: 1px solid #666;
  color: #666;
  font: 0.8em Arial, sans-serif;
  font-weight: bold;
  box-sizing: initial;

  &:hover,
  &:after{
    content: "?" !important;
  }
}

<header>
 <h3 class="dashboard-teaser-title">{{ 'home.status-title' | translate }} 
 </h3>
 <div class="qmarkCircle tooltip is-tooltip-multiline" data-tooltip="Change your status according to your current availability. You can also add a note to your status. If you chose to hide your profile, you can still use the platform for all the other activity.">
 </div>
</header>

score 0 · Answer 3 · answered Nov 06 '20 at 16:01

0

SOLUTION WITHOUT USING FLEX:

Use this code for all the elements you want to align parallell:

display: inline-block;
vertical-align: middle;

answered Nov 06 '20 at 16:01

Ahmad Habib

2,053
1
13
28

how to adjust a div in the middle of the page

3 Answers3