0

pessoal estava querendo que esses três elementos a data o local e esse botão verdes ficarem um o lado do outro no centro da tela tanto no desktop quanto no mobile eu preciso fazer isso com float mais não posso usar framework como bootstrap e nem media queries se possível eu tentei aqui porem os elementos ficam muito juntos e no mobile fica torto segue as imagens e o código.inserir a descrição da imagem aqui inserir a descrição da imagem aqui

OBS: Percebam que na imagem no desktop eu consegui centralizar mais os elementos ficam muito juntos e quando você redimenciona a tela ele "buga" total e não centraliza.

HTML:

<div class="callbacks_container">
            <ul class="rslides" id="slider4">
                <li>
                    <div class="banner-01-header">
                        <img src="images/bg-palestrantes-v2.jpg" class="img-slide" >
                        <div class="content-header">
                            <img src="images/logo-www.png" class="logo-center">
                            <h2 class="title">Você já pensou em ser uma mulher mais poderosa?</h2>
                            <div class="info-date">
                                <p class="date-event"><b><span>27, 28 e 29</span></b> <br> de Outubro</p>
                                <a href="#" class="link-garanta-vaga">Garanta sua vaga</a>
                                <p class="address-hotel"><b>Sheraton São Paulo <br> WTC Hotel</b> <br>
                                        São Paulo | SP | Brasil</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="banner-01-header">
                        <img src="images/2.jpg" class="img-slide">
                        <a href="#" class="link-garanta-vaga">Garanta sua vaga</a>
                    </div>
                </li>
            </ul>
        </div>

CSS:

.banner-01-header{
  position: relative;
  height: 700px;
}

.banner-01-header .content-header{
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
}

.banner-01-header .content-header .logo-center{
  margin-top: 30px;
}

.banner-01-header .content-header .title{
  text-transform: uppercase;
  color: #fff;
  margin-top: 20px;
}

.banner-01-header .content-header .info-date{
  display: inline-block;
  margin: 275px auto;
}

.banner-01-header .content-header .info-date .date-event{
  color: #fff;
  float: left;

}

.banner-01-header .content-header .info-date .date-event span{
  font-size: 35px;
}

.banner-01-header .content-header .info-date .link-garanta-vaga{
    border-radius: 0 30px !important;
    background: #28b40d !important;
    background: -moz-linear-gradient(top, #28b40d 0%, #49ed16 100%) !important;
    background: -webkit-linear-gradient(top, #28b40d 0%,#49ed16 100%) !important;
    background: linear-gradient(to bottom, #28b40d 0%,#49ed16 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28b40d', endColorstr='#49ed16',GradientType=0 ) !important;
    border: 3px solid rgba(0, 0, 0, 0.41) !important;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35) !important;
    text-shadow: 1px 1px #013600;
    color: #fff;
    font-size: 25px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    padding: 13px 65px;
    display: inline-block;
    float: left;
  }

.banner-01-header .content-header .info-date .address-hotel{
  color: #fff;
  text-align: left;
  float: left;
  font-size: 18px;
}

1 Resposta 1

0
    .banner-01-header{
  position: relative;
  height: 700px;
}

.banner-01-header .content-header{
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
}

.banner-01-header .content-header .logo-center{
  margin-top: 30px;
}

.banner-01-header .content-header .title{
  text-transform: uppercase;
  color: #fff;
  margin-top: 20px;
}


.banner-01-header .content-header .info-date{
  display: inline-block;
  margin: 275px auto;
}

.banner-01-header .content-header .info-date p{
  display: inline-block;
}

.banner-01-header .content-header .info-date a{
  margin: 0 15px;
}

.banner-01-header .content-header .info-date .date-event{
  color: #fff;

}

.banner-01-header .content-header .info-date .date-event span{
  font-size: 35px;
}

.banner-01-header .content-header .info-date .link-garanta-vaga{
    border-radius: 0 30px !important;
    background: #28b40d !important;
    background: -moz-linear-gradient(top, #28b40d 0%, #49ed16 100%) !important;
    background: -webkit-linear-gradient(top, #28b40d 0%,#49ed16 100%) !important;
    background: linear-gradient(to bottom, #28b40d 0%,#49ed16 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28b40d', endColorstr='#49ed16',GradientType=0 ) !important;
    border: 3px solid rgba(0, 0, 0, 0.41) !important;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35) !important;
    text-shadow: 1px 1px #013600;
    color: #fff;
    font-size: 25px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    padding: 13px 65px;
    display: inline-block;
  }

.banner-01-header .content-header .info-date .address-hotel{
  color: #fff;
  text-align: left;
  font-size: 18px;
}

Experimenta esse css aí, peguei o paragrafo que tem por padrão display:block; e coloquei display:inline-block; e coloquei margem lateral no a. Não sei se podia, eu removi o float:left;. Não vejo uma forma de fazer com ele.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .