Simple problem with CSS alignment

Navigation
0

Hello, I'm new to this, so I'm having a lot of trouble with this float.

I want to do something like this:

Myattempt:

.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>
    
asked by anonymous 01.11.2017 / 13:24

2 answers

1

You do not use position: absolute; along with float , just do so. 

.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 this 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>
    
01.11.2017 / 13:28
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>

Complete Guide

Prefixing (optional)

    
01.11.2017 / 13:36
Countdown Import Excel C # OleDB