Image centreren probleem!

Door Inter Kode op 18-03-2016 16:37 gewijzigd op 18-03-2016 16:40

2.381 views

Hallo, ik kom er maar niet uit om dit logo gecentreerd te houden ( zie screenshot : )
https://i.imgur.com/rgjINVs.png
De links er naast bepalen de positie van dit logo.
Het is dus de bedoeling om de links te weergeven aan de linker en rechter kant van het logo maar dat het logo hier niet door word beïnvloed ( hoe lang de links ook zijn )
Ik hoop dat de oplossing makkelijk is en dat iemand mij kan helpen, ik heb mijn code snippet achtergelaten :
Mvg Patrick


<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/simplex/bootstrap.min.css">
<style>

#top-menu {
  text-align: center;
  font-size: 2em;
  font-weight: 700;
  width: 100%;
}

</style>
</head>
<body>

<div class="container">

  <div class="col-xs-12" id="top-menu">

    <a href="#live">Live Games</a>	
    <a href="#upcoming">Upcoming</a>	
    <img src="http://i.imgur.com/pPgkwVj.png" width="200">
    <a href="#contact">Contact</a>
    <a href="#login">Login</a>

  </div>

</div>

</body>
</html>

Randy vsf

18-03-2016 16:48

Je kan 3 aparte div's maken, en die ieder een width meegeven.

Inter Kode

18-03-2016 17:18

Ja maar als je ze alle 3 een width mee geeft dan zou de grotere de ander weer opzij duwen?
Hoe ziet dit er uit als je de browser zou resizen?

E vH

18-03-2016 17:26 gewijzigd op 18-03-2016 17:31

Bovenstaande code centreert "alles".. kijk maar is goed naar je plaatje.. de tekst (inclusief logo) is gecentreerd over de gehele breedte...

de afstand (links) tot aan de L is even groot als rechts vanaf de letter N.

Zoals Randy al aangeeft, 3 divs maken. dus col-xs-4 gebruiken :)


<div class="container">

  <div class="row">
  
    <div class="col-xs-4 text-center">
      <a href="#live">Live Games</a>    
      <a href="#upcoming">Upcoming</a>    
    </div>
    <div class="col-xs-4 text-center">
      <img src="http://i.imgur.com/pPgkwVj.png" width="200">
    </div>
    <div class="col-xs-4 text-center">
      <a href="#contact">Contact</a>
      <a href="#login">Login</a>
    </div>
  </div>

</div>

Edit:
"Hoe ziet dit er uit als je de browser zou resizen?"
Je gebruikt nu: col-xs-12
Je kan ook in je class dit kunnen gebruiken:
col-lg-6 col-md-3 col-sm-4 col-xs-12

Dus zoiets:


<div class="container">

  <div class="row">
  
    <div class="col-lg-6 col-md-3 col-sm-4 hidden-xs text-center">
      <a href="#live">Live Games</a>    
      <a href="#upcoming">Upcoming</a>    
    </div>
    <div class="col-xs-12 text-center">
      <img src="http://i.imgur.com/pPgkwVj.png" width="200">
    </div>
    <div class="col-lg-6 col-md-3 col-sm-4 hidden-xs text-center">
      <a href="#contact">Contact</a>
      <a href="#login">Login</a>
    </div>
  </div>

</div>

Betere uitleg over bootstrap en het grid systeem is hier te vinden: https://getbootstrap.com/examples/grid/

Reageren

Inloggen om te reageren