Fatal编程技术网
  • html/
  • Html 在div中对齐化身和文本

Html 在div中对齐化身和文本

html css

Html 在div中对齐化身和文本,html,css,Html,Css,我有把小提琴： 以下是HTML： <html> <head> </head> <body> <h2><i></i>Support Forum</h2> <div> <a href="https://www.website.co.uk/support-forums/users/chuckie/"> <img alt="" height="40" src="

我有把小提琴：

以下是HTML：

<html>
<head>
</head>
<body>
<h2><i></i>Support Forum</h2>
<div>
    <a href="https://www.website.co.uk/support-forums/users/chuckie/">
    <img alt="" height="40" src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&amp;d=mm&amp;r=g" srcset="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=80&amp;d=mm&amp;r=g 2x" width="40"></a>
    <h4>
    <a href="https://www.website.co.uk/support-forums/users/chuckie/">
    Andrew Truckle</a></h4>
    <a href="https://www.website.co.uk/logout/">
    Log Out</a> </div>
</body>
</html>


支持论坛
基本上，我希望名称显示在头像的右侧。而注销应显示在下方

如果我在
img
和
h4
对象上使用
float:left
，那么所有内容都会并排显示，包括注销，这不是我想要的

如何修复？

解决方案1：


支持论坛
解决方案1：


支持论坛




支持论坛
最简单的方法是在标签中插入内容：
文本、图像、链接
 


支持论坛
最简单的方法是在标签中插入内容：
文本、图像、链接

我试图在不修改HTML的情况下获得解决方案。假设您对HTML部分没有任何控制权。下面是帮助您对齐标签的CSS

但是如果您可以修改HTML，我建议您添加一些类或id，并将下面的CSS添加到相应的选择器中，而不是全局应用

解决方案：

h4，img{
显示：内联块；
垂直对齐：中间对齐；
}
a[href*=“注销”]{
显示：块；
}

支持论坛
我试图在不修改HTML的情况下获得解决方案。假设您对HTML部分没有任何控制权。下面是帮助您对齐标签的CSS

但是如果您可以修改HTML，我建议您添加一些类或id，并将下面的CSS添加到相应的选择器中，而不是全局应用

解决方案：

h4，img{
显示：内联块；
垂直对齐：中间对齐；
}
a[href*=“注销”]{
显示：块；
}

支持论坛
首先将注销链接的锚定标记置于div标记的外部和下方。因为头像，名字和注销是div的兄弟姐妹和孩子，所以您不能使用float和flex box分别布局avator，名字，以及注销。您只能使用CSS相对和绝对定位进行布局

试试这个

<html>
<head>
    <title>Document</title>
</head>
<body>
    <h2><i></i>Support Forum</h2>
    <div>
        <a href="https://www.website.co.uk/support-forums/users/chuckie/">
        <img alt="" height="40" src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&amp;d=mm&amp;r=g" srcset="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=80&amp;d=mm&amp;r=g 2x" width="40">
        </a>
        <h4>
        <a href="https://www.website.co.uk/support-forums/users/chuckie/">
        Andrew Truckle</a>
       </h4>
    </div> 
    <a href="https://www.website.co.uk/logout/">Log Out</a> 
</body>
</html>
首先将注销链接的锚定标记置于div标记的外部和下方。因为头像，名字和注销是div的兄弟姐妹和孩子，所以您不能使用float和flex box分别布局avator，名字，以及注销。您只能使用CSS相对和绝对定位进行布局

试试这个

<html>
<head>
    <title>Document</title>
</head>
<body>
    <h2><i></i>Support Forum</h2>
    <div>
        <a href="https://www.website.co.uk/support-forums/users/chuckie/">
        <img alt="" height="40" src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&amp;d=mm&amp;r=g" srcset="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=80&amp;d=mm&amp;r=g 2x" width="40">
        </a>
        <h4>
        <a href="https://www.website.co.uk/support-forums/users/chuckie/">
        Andrew Truckle</a>
       </h4>
    </div> 
    <a href="https://www.website.co.uk/logout/">Log Out</a> 
</body>
</html>
到目前为止你试过什么？像这样的？使用css，您可以显示块、内联、内联块等元素。。。内联元素可以在一行中，而不是块元素。到目前为止，您尝试过什么？类似这样的东西？使用css，您可以显示块、内联、内联块等元素。。。内联元素可以在一行中，而块元素则可以。你能给你的答案加上一点调子吗？就像Jarlik Stepsto在评论中提供的一样？谢谢。你能给你的答案加上一点调子吗？就像Jarlik Stepsto在评论中提供的一样？谢谢。不幸的是，我无法更改HTML。但是最后的语法有类，所以我可以使用CSS和现有的答案来根据需要设置样式。谢谢。不幸的是，我无法更改HTML。但是最后的语法有类，所以我可以使用CSS和现有的答案来根据需要设置样式。谢谢。不幸的是，我无法更改HTML。但是最后的语法有类，所以我可以使用CSS和现有的答案来根据需要设置样式。谢谢。不幸的是，我无法更改HTML。但是最后的语法有类，所以我可以使用CSS和现有的答案来根据需要设置样式。 
html body{
    margin:0;
    padding:0;
}
body div{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}