Simple problem with CSS alignment

Asked

Viewed 22 times

0

Hello, I’m new to this, so I’m having a lot of problems with this float.

I want to do something like this: inserir a descrição da imagem aqui

My attempt:

.ant{
  position: absolute;
  float: left;
  width: 80px;
  height: auto;
  margin-left: 30%;
  margin-top: 60px;
}

.logo{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  float: left;
}

.prox{
  width: 80px;
  height: auto;
  margin-right: 30%;
  margin-top: 60px;
}
<div id="head">

    <a href="index.html">
      <img src="https://uploaddeimagens.com.br/images/001/156/860/original/ant.png?1509538781" class="ant"/>
    </a>

    <a href="index.html">
      <img src="https://uploaddeimagens.com.br/images/001/156/858/original/logo.png?1509538726" height="112px" height="212px" class="logo"/>
    </a>

    <a href="index.html">
      <img src="https://uploaddeimagens.com.br/images/001/156/862/original/prox.png?1509538834" height="112px" class="prox"/>
    </a>

</div>

css

2 answers

1


You don’t use position: absolute; along with float, just do it like this.

.ant{
  float: left;
  width: 80px;
  height: auto;
  margin-top: 60px;
}

.logo{
  margin-left: 60px;
  margin-top: 40px;
  float: left;
}

.prox{
  width: 80px;
  height: auto;
  margin-left: 60px;
  margin-top: 60px;
  float: left;
}
<div id="head">

    <a href="index.html">
      <img src="https://uploaddeimagens.com.br/images/001/156/860/original/ant.png?1509538781" class="ant"/>
    </a>

    <a href="index.html">
      <img src="https://uploaddeimagens.com.br/images/001/156/858/original/logo.png?1509538726" height="112px" height="212px" class="logo"/>
    </a>

    <a href="index.html">
      <img src="https://uploaddeimagens.com.br/images/001/156/862/original/prox.png?1509538834" height="112px" class="prox"/>
    </a>

</div>

Or you can do it that way too 

#head{
  width: 100%;
  float: left;
  text-align: center;
}

.ant{
  position: absolute;
  left: 0;
  width: 80px;
  height: auto;
  margin-top: 60px;
}

.logo{
  margin-top: 40px;
  width: 130px;
}

.prox{
  position: absolute;
  right: 0;
  width: 80px;
  height: auto;
  margin-left: 60px;
  margin-top: 60px;
  float: left;
}
<div id="head">

    <a href="index.html">
      <img src="https://uploaddeimagens.com.br/images/001/156/860/original/ant.png?1509538781" class="ant"/>
    </a>

    <a href="index.html">
      <img src="https://uploaddeimagens.com.br/images/001/156/858/original/logo.png?1509538726" height="112px" height="212px" class="logo"/>
    </a>

    <a href="index.html">
      <img src="https://uploaddeimagens.com.br/images/001/156/862/original/prox.png?1509538834" height="112px" class="prox"/>
    </a>

</div>

1

For a less semantic and maintainable solution use flexbox

#head {
  display: flex;
  height: 200px;
  justify-content: space-between;
  align-items: center;
}
.ant,.prox {
  height: 70px;
  padding: 10px;
}
.logo{
  height: 170px;
}
<div id="head">

    <a href="index.html">
      <img src="https://uploaddeimagens.com.br/images/001/156/860/original/ant.png?1509538781" class="ant"/>
    </a>

    <a href="index.html">
      <img src="https://uploaddeimagens.com.br/images/001/156/858/original/logo.png?1509538726" height="112px" height="212px" class="logo"/>
    </a>

    <a href="index.html">
      <img src="https://uploaddeimagens.com.br/images/001/156/862/original/prox.png?1509538834" height="112px" class="prox"/>
    </a>

</div>

Full guide

Prefixation (optional)

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.