Question

我在网格中有这个代码。

<div class="nav__logo nav__logo--height">  
  <a href="http://localhost/step-asia/">
    <img src="assets/image/logo-1.png" alt="Step Asia Logo">
  </a>
</div>

这是css风格

.nav__logo {
  border: 1px solid #f7b5b5;
  text-align: center;
}
.nav__logo a {
  display: table;
  color: black;
  text-transform: capitalize;
  text-decoration: none;
}
.nav__logo--height {
  height: 19px;
  display: inline-block;
  width: 100%;
}
.nav__logo img {
  margin: 0 auto;
}

我尝试使用位置属性但不是解决方案，在调整屏幕大小时使用它有问题。 text-align 也不起作用，因为它是一张图片。

上面的DIV位于网格列中。你能说出一个主意吗？修改代码是可以接受的，只需要想法。

Answer 1

对容器元素使用flex布局

.nav__logo{
   border: 1px solid #f7b5b5;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: center;
   align-items:center;
   align-content:  center;
}
.nav__logo--height {
  height: 19px;
  width: 100%;
}
.nav__logo>a {
  display: block;
  color: black;
  text-transform: capitalize;
  text-decoration: none;
}
.nav__logo>img {
  display: block;
}

Answer 2

您好希望它有助于使用以下代码我使用css justify-content: center;来移动导航徽标中心

.nav__logo {
  border: 1px solid #f7b5b5;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  }

<html>
<body>
<div class="nav__logo nav__logo--height">  
  <a href="http://localhost/step-asia/">
    <img src="http://quesa.sourceforge.net/other/files/logo_small.jpg" alt="Step Asia Logo">
  </a>
</div>
  </body
</html>

Answer 3

问题是由 .nav__logo a { display: table;

您要将其更改为display: inline;或display:block;或display: inline-block

几乎“桌子”是唯一不会做你想做的事情。

Answer 4

在text-align:center标记中添加a，以便图片位于中心。

.nav__logo a {
  display: table;
  color: black;
  text-transform: capitalize;
  text-decoration: none;
  text-align:center;
}

以下是 Jsfiddle

的示例

Answer 5

要使图片居中，请从标记中删除display: table;或将其设为display: inline-block;

.nav__logo {
  border: 1px solid #f7b5b5;
  text-align: center;
}
.nav__logo a {
  color: black;
  text-transform: capitalize;
  text-decoration: none;
}
.nav__logo--height {
  height: 19px;
  display: inline-block;
  width: 100%;
}
.nav__logo img {
  margin: 0 auto;

Answer 6

addiu $sp, $sp, -4

add $s0, $0, $sp

la $a0, fromatInt
add $a1, $0, $s0
jal scanf
lw $a0, 0($s0)
#----------------------
#add function calls here
#----------------------
addiu $sp, $sp, +4 #deallocate

在中心制作导航徽标位置

6 个答案: