如何使内联块正确对齐

Question

我正在尝试将图像右对齐，但尽管反复尝试使用 flex、text-align 等，我还是无法做到这一点

我已经看了很多问题，但没有找到满意的答案。

img {
        display: inline-block;
        text-align: right;
    }

<h1>
  <img src="burj.jpeg">    
  Enjoy the world of pure travel masti
</h1>

Answer 1

你可以使用 float right

img {
    float: right;
}

<h1>
        <img src="http://via.placeholder.com/350x150">    
        Enjoy the world of pure travel masti
    </h1>
CSS:-

版本

img {
    float: left;
}

<h1>
        <img src="http://via.placeholder.com/350x150">    
        Enjoy the world of pure travel masti
    </h1>
CSS:-

Answer 2

我认为您需要 img（=元素名称）而不是 .img（=class 名称）然后使用 float:

img {
    display: inline-block;
    float:right;
}

Answer 3

You are using . operator in CSS while img is the tag name. . operator is used in the class name while # operator in id. Direct tag nme is used while eriting their CSS.

写这个。

img {
    display: inline-block;
    float: right;
}

运行它here.

Answer 4

在文本之后放置 h1 图片标签可以达到目的。

<h1>  
      Enjoy the world of pure travel masti
      <img src="burj.jpeg" alt="Sample Picture">  
 </h1>

如何使内联块正确对齐

How to make inline-block align right

html

css

text-align

flexbox