How to place Text and an Image next to each other in HTML?

后端未结

关注

 3  1218

I want the text and the image to be next to each other but I want the image to be on the far left of the screen and I want the text to be on the far right of the screen. Thi

相关标签:

3条回答

暗喜

2020-12-30 20:51
```
img {
    float:left;
}
h3 {
    float:right;
}
```
jsFiddle example

Note that you will probably want to use the style clear:both on whatever elements comes after the code you provided so that it doesn't slide up directly beneath the floated elements.
0 讨论(0)
发布评论:

提交评论
- 加载中...
余生分开走

2020-12-30 20:53
You want to use css float for this, you can put it directly in your code.
```
<body>
<img src="website_art.png" height= "75" width="235" style="float:left;"/>
<h3 style="float:right;">The Art of Gaming</h3>
</body>
```
But I would really suggest learning the basics of css and splitting all your styling out to a separate style sheet, and use classes. It will help you in the future. A good place to start is w3schools or, perhaps later down the path, Mozzila Dev. Network (MDN).

HTML:
```
<body>
  <img src="website_art.png" class="myImage"/>
  <h3 class="heading">The Art of Gaming</h3>
</body>
```
CSS:
```
.myImage {
  float: left;
  height: 75px;
  width: 235px;
  font-family: Veranda;
}
.heading {
  float:right;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
天涯浪人

2020-12-30 20:58

You can use vertical-align and floating.

In most cases you want to vertical-align: middle, the image.

Here is a test: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

For middle, the definition is: The element is placed in the middle of the parent element.

So you might want to apply that to all elements within the element.

0 讨论(0)
发布评论:

提交评论
- 加载中...