How to vertically align inline element and inline-block element

Question

Say I have the following code

p {
  display: inline;
}

div {
  display: inline-block;
  width: 100px;
  height: 50px;
  background: black;
}

 <p>
     Some  text
     <div>
     </div>
    </p>

What is created is this

Here the inline and inline-block elements are not vertically centered. How would I make it look like this :

the duplicate is about images but it's exactly the same as your div here behave as the image in the duplicate — Temani Afif, Feb 27 '19 at 12:35
A `p` tag cannot contain a `div` element. `p` tags can only contain [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content). — James Coyle, Feb 27 '19 at 12:37
added another duplicate related to what @AbhishekPandey said — Temani Afif, Feb 27 '19 at 12:37

score 0 · Answer 1 · edited Feb 27 '19 at 12:41

0

I have used flex css and also add one new div I hope this will help you.

p {
  display: inline;
  margin: 0;
}
.inner-div {
  display: inline-block;
  width: 100px;
  height: 50px;
  background: black;
}
.outer-div{
  display: flex;
  align-items: center;
  display: -webkit-flex;
  -webkit-align-items: center;
}

<div class="outer-div">
  <p>Some text</p>
    <div class="inner-div"></div>
</div>

edited Feb 27 '19 at 12:41

Dharmesh Vekariya

1,138
2
13
31

answered Feb 27 '19 at 12:36

Mohit Gupta

739
1
5
16

doing this will make he use of inline and inline-block useless – Temani Afif Feb 27 '19 at 12:38

score -1 · Answer 2 · answered Feb 27 '19 at 12:34

-1

just add float left to

tag

p{
display: inline;
float:left;
}

This will align both element properly

answered Feb 27 '19 at 12:34

chandra shekhar joshi

163
12

How to vertically align inline element and inline-block element

2 Answers2