How to center my logo and text on my website? [closed]

Question

How to center my logo and text on my website? [closed]

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

How can I make my page centered?

I already tried it with center-block but it does not focus when I show it in the browser

File index.html

/* FILE: main.css */

body {
  background-color: black;
  color: white;
}

img {
  max-width: 100%;
}

.quitar-float {
  float: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet1" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.csss">
  <link rel="stylesheet" href="css/main.css">
  <title> Fenrris Clothing </title>
</head>

<body>
  <div class="col-md-5 center-block quitar-float text-center">
    <img src="./imagenes/l.png">
    <h1>Fenrris Clothing </h1>
    <p>Conoce el nuevo estilo </p>
    <nav>
      <a href=""> Inicio </a>
      <a href=""> Playeras </a>
      <a href=""> Contacto </a>
    </nav>
  </div>
</body>

</html>

html css bootstrap web

asked by Land 23.12.2017 в 20:40

source

3 answers

JSON Reader does not work Positioning divs CSS

score 1 · Answer 1

How about estimated. I have reviewed the code that you have published and I have the following comments:

When using bootstrap, you should always place a top element of class container . <div class="container"> AQUI VA TODO TU HTML RESPONSIVE </div>

According to the bootstrap logic, column elements col-XX-N (in your case col-md-5), must be inside a class element row <div class="row"></div>

You have a problem with the bootstrap.min.css file because you add a S of more in the bootstra.min.csss file name.

I have modified the recommended way by bootstrap to include bootstrap on your page.

/* FILE: main.css */

body {
  background-color: black;
  color: white;
}

img {
  max-width: 100%;
}

.quitar-float {
  float: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="css/main.css">
  <title> Fenrris Clothing </title>
</head>

<body>
  <div class="col-md-5 center-block quitar-float text-center">
    <img src="./imagenes/l.png">
    <h1>Fenrris Clothing </h1>
    <p>Conoce el nuevo estilo </p>
    <nav>
      <a href=""> Inicio </a>
      <a href=""> Playeras </a>
      <a href=""> Contacto </a>
    </nav>
  </div>
</body>

</html>

score 0 · Answer 2

Use magin: 0 auto;

To center what the block would be. And he adds:

text-align: center;

/* FILE: main.css */

.centrado {
margin:0 auto;
text-align:center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title> Fenrris Clothing </title>
</head>
<body>
  <div class="centrado">
    <img src="./imagenes/l.png">
    <h1>Fenrris Clothing </h1>
    <p>Conoce el nuevo estilo </p>
    <nav>
      <a href=""> Inicio </a>
      <a href=""> Playeras </a>
      <a href=""> Contacto </a>
    </nav>
  </div>
</body>

</html>

score 0 · Answer 3

Since you are using bootstrap, I recommend the opinion of frames using the "container" class but if it continues to give you problems try to just put the label <center> encloses with this label the element you want to center </center> , it could be <center> <div></div> </center> with this you can center most of all HTML elements.