Vertical centering of inline elements,

HTML & CSS
1 
 <div class="cout">
  <input id="bo" type="button" value=" BOLD ">
 <input id="it" type="button" value=" ITALIC ">
 <input id="un" type="button" value=" UNDERLINE "><br>
 <textarea id="tx" name="" id="" cols="30" rows="10">Раз, два, три, четыре, пять, Вышел зайчик погулять.</textarea><br>
 <iframe id="fr" mame="fr"></iframe>
 </div>

.cout{
   
/* height: 100%; */
    text-align: center;
    
}

How to center vertically?

2

HTML

<div class="cout">
 <div>

  <input id="bo" type="button" value=" BOLD "><br>
  <input id="it" type="button" value=" ITALIC "><br>
  <input id="un" type="button" value=" UNDERLINE "><br>

  <textarea id="tx" name="" id="" cols="30" rows="10">
   Раз, два, три, четыре, пять, Вышел зайчик погулять.
  </textarea><br>

  <iframe id="fr" mame="fr"></iframe>

 </div>
</div>

CSS

html,body {
   height: 100%;
   margin: 0;
 }
body {
   background-color: #f9f9f9;
   font: normal 1em / 1.5  sans-serif;
 }
.cout{
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
 }
.cout div {
   padding: 1em 1em 0.5em;
   border: 1px solid #999;
   border-radius: 0.75em;
   background-color: #fff;
   text-align: center;
 }
input,textarea {
   margin-bottom: 1em;
 }
1 Like
3

How to centre what vertically?

Do you mean the whole section (all that code you posted) vertically centred in the viewport?

Or do you mean the inline elements vertically aligned with each other?

Assuming you want the whole thing vertically centred in the viewport and there is nothing else on the page then I would do it like this with a slight change to the html.

@snadyleiby has given a similar solution above and there are various other ways it could be done.

It all depends on what comes next and what you exactly want to happen.

4

I meant window, but how do I place an inline element in the center of the window without a div wrapper?

5

Do you mean one single inline element? That’s not the code you showed. You had a block element wrapping inline elements

I showed you an example of centering your example without an extra wrapper (except I added an inner wrapper to tidy up the inputs).

Using your exact html you could do this instead.

Not as neat as my first example.