底部旁边的徽标和文字答案

【问题标题】：Logo and text next to it at the bottom底部旁边的徽标和文字
【发布时间】：2017-05-17 18:00:26
【问题描述】：

我想制作一个标题，其中我有一个位于左侧的徽标和该徽标旁边的文本（在徽标的右侧），但我希望文本出现在图像的底部而不是顶部。我将如何实现？

我尝试将标题 div 设置为相对，标语 div 设置为绝对，但随后文本被写入图像...

我的html：

<html>
<head>
<title>test</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="container header">
<div class="logo">
    <img src="images/logo.png" alt="Logo" class="img-responsive">
</div>
<div class="slogan">
Lorem ipsum lorem ipsum
</div>

</div>

</body>


</html>

和css：

 body{
        maring:0 auto;
    }

    .logo{
        float:left;
    }

    .slogan{
        float:left;
    }

这是我想要实现的图像：

【问题讨论】：

Vertically align text to the bottom of the box?的可能重复
他们，没有。你有没有读过我想要达到的目标？
是的，几乎一样。唯一的区别是应该没有问题的标志：jsfiddle.net/dLrndyyh

标签： html css

【解决方案1】：

如果您希望动态调整大小，我建议您使用 flexbox 替代方案：

body {
  margin: 0 auto;
}
.logo {
  float: left;
}
.slogan {
  /* float: left; */
  align-self: flex-end;
}
.header {
  display: flex;
  flex-flow: row wrap;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container header">
  <div class="logo">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=100×100&w=100&h=100" alt="Logo" class="img-responsive">
  </div>
  <div class="slogan">
    Lorem ipsum lorem ipsum
  </div>
</div>

【讨论】：

【解决方案2】：

最简单的选择是给你的口号一个上边距：

.slogan{
    float:left;
    margin-top: 4px;
}

【讨论】：

边距不适合响应式设计...所以我真的做不到
@mheonyae 我真的很好奇你为什么会这样认为？你有参考吗？
你意识到不同屏幕上的图像大小不同吗？意味着保证金也必须不同才能达到我想要实现的目标
@mheonyae 啊，你不能用 em 或 %？