Question

在我的导航栏中，我在div中有两个元素，一个图片和一些文本。我想将文本向下移动几个像素。这通常很容易，但是，文本根本就没有变化。当我在包含div上放置顶部填充时，两个元素都向下移动。我只想让文字向下移动，并将图像留在同一个地方。这是我的代码：

    <div class="row">
        <div class="col-xs-8">
        <img src="{{asset('/images/navbar/banner.png')}}" class="banner">
        <a class="text-white hover-white" id="title" href="/">MY WEBSITE'S TITLE</a>                            
    </div>

我想在不影响图像的情况下向下移动几个像素

Answer 1

尝试将a标记替换为：

<a class="text-white hover-white" id="title" href="/" style="padding-top: 3px; position: absolute">MY WEBSITE'S TITLE</a>

这将在文本顶部添加3px的填充。

Answer 2

你可以使用 line-height 属性作为文字
例如：

a {
   line-height:25px;
  }

Answer 3

如果要将文本与图像底部对齐，可以使用

a {
   vertical-align: bottom;
}

示例：

＆＃13;

a {
  vertical-align: bottom;
  }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-8">
    <img src="https://placehold.it/100x100" class="banner">
    <a class="text-white hover-white" id="title" href="/">MY WEBSITE'S TITLE</a>
  </div>
</div>

＆＃13;

将div内的元素向下移动几个像素

3 个答案: