发表新帖
发表新帖

CSS align images and text on same line

后端 未结
关注
9 1093
长情又很酷
长情又很酷 2020-12-05 06:16

I have been searching and trying different methods for hours now. I just can\'t seem to get these two images and text all on one line. I want both the images and both text

相关标签:
9条回答
  • 野趣味
    2020-12-05 06:51

    You can simply center the image and text in the parent tag by setting

    div {
     text-align: center;
}

    vertical center the img and span

    img {
     vertical-align:middle;
}
span {
     vertical-align:middle;
}

    You can just add second set below, and one thing to mention is that h4 has block display attribute, so you might want to set

    h4 {
    display: inline-block
}

    to set the h4 "inline".

    The full example is shown here. 

    <div id="photo" style="text-align: center">
  <img style="vertical-align:middle" src="https://via.placeholder.com/22x22" alt="">
  <span style="vertical-align:middle">Take a photo</span>
</div>

    0 讨论(0)
  • 离开以前
    2020-12-05 06:52

    First, I wouldn't recommend using inline styles. If you must, you should try applying floats to each item:

    <img style='float:left; height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/>
<h4 style='float:left;" class='liketext'>$likes</h4>
<img style='float:left; height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/>
<h4 style='float:left;" class='liketext'>$dislikes</h4>

    It might require some tweaking afterwards, and clearing the floats.

    0 讨论(0)
  • 无人及你
    2020-12-05 06:53

    A H4 elemental is a block display type element. You could force the H4 to have a inline display type, or simply use an inline element like P instead and style it however you require.

    For reference: http://www.w3.org/TR/CSS21/visuren.html#propdef-display

    So you'd change the display type of the H4 like:

    <html>
<head>
   <title>test</title>
   <style type='text/css'>
     h4 { display: inline }
   </style>
  </head>
  <body>
  <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/><h4 class='liketext'>$likes</h4>
  <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>
</body>
</html>
    0 讨论(0)
  • 盖世英雄少女心
    2020-12-05 06:57

    try to insert your img inside your h4 DEMO

    <h4 class='liketext'><img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/>$likes</h4>
<h4 class='liketext'> <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/>$dislikes</h4>​
    0 讨论(0)
  • -上瘾入骨i
    2020-12-05 06:58

    In this case you can use display:inline or inline-block.

    Example:

    img.likeordisklike {display:inline;vertical-align:middle;  }
h4.liketext { color:#F00; display:inline;vertical-align:top;padding-left:10px; }
    <img class='likeordislike' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img class='likeordislike' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>

    Don't use float:left because again need to write one more clear line and its old method also..

    0 讨论(0)
  • 既然无缘
    2020-12-05 07:06 
    vertical-align: text-bottom;

    Tested, this worked for me perfectly, just apply this to the image.

    0 讨论(0)
 看不清?
提交回复
热议问题