-1

For my webpage, I want three inline images, with my logo below and a horizontal menu below and that is it, but it won't let me center it all. Can anyone help me? Here's my code:

* {
  box-sizing: border-box;
}

.all {
  text-align: center;
  background: gray;
}

.row {
  display: flex;
  text-align: center;
}

.column {
  flex: 33.3%;
  padding: 5px;
  max-width: 320px;
  filter: brightness(60%);
}

.column:hover {
  filter: brightness(100%);
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: gray;
}
<html>

<head>

  <link rel="stylesheet" type="text/css" href="css.css">

</head>

<body>
  <div class="all">
    <div class="row">
      <div class="column">
        <img src="images/hs.jpg" alt="Suisse" style="width:100%">
      </div>
      <div class="column">
        <img src="images/pp.jpg" alt="Plaza" style="width:100%">
      </div>
      <div class="column">
        <img src="images/pa.jpg" alt="Apart" style="width:100%">
      </div>
    </div>
    <div class="logo">
      <img src="images/logo.jpg" alt="logor">
    </div>
    <div class="menu">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="contact.html">News</a></li>
        <li><a href="formation.html">Formations</a></li>
        <li><a href="inthenews.html">Revue de Presse</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

Just to reiterate, what I'm trying to do is have on the top center three images that are aligned (each image is 320px). Below, trying to have my logo. And right below it, a small menu.

Nothing to fancy, really. Thanks for the read.

Manjuboyz
  • 6,978
  • 3
  • 21
  • 43
Home Desktop
  • 1

2 Answers2

2

Simply add justify-content:center; to the .row class. See my example below of it working

* {
  box-sizing: border-box;
}

.all {
    text-align: center;
    background: gray;
}

.row {
  display: flex;
  text-align: center;
  justify-content:center;
}

.column {
  flex: 33.3%;
  padding: 5px;
  max-width: 320px;
  filter: brightness(60%);
}

.column:hover {
    filter: brightness(100%);
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  justify-content:center;
  display: flex;
}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: gray;
}
<html>
    <head>

            <link rel="stylesheet" type="text/css" href="css.css">

    </head>
    <body>
        <div class="all">
            <div class="row">
                <div class="column">
                    <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Suisse" style="width:100%">
                </div>
                <div class="column">
                    <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Plaza" style="width:100%">
                </div>
                <div class="column">
                    <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Apart" style="width:100%">
                </div>
            </div>
            <div class="logo">
                <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="logor">
            </div>
            <div class="menu">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="contact.html">News</a></li>
                    <li><a href="formation.html">Formations</a></li>
                    <li><a href="inthenews.html">Revue de Presse</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>
John
  • 5,132
  • 1
  • 6
  • 17
  • You're awesome! How about the menu below? Any way? – Home Desktop Jul 04 '20 at 16:56
  • @HomeDesktop Yeah add `justify-content:center;` and `display: flex;` to the `ul` in CSS. I updated my answer to reflect this. – John Jul 04 '20 at 17:25
  • Thanks! My menu is centered but it is ever so slightly pushing to the right, do you know a fix? – Home Desktop Jul 04 '20 at 17:36
  • @HomeDesktop I'm not seeing it being pushed to the right, but if you are you could always add something like `margin-right: 10px;` to the `ul` in CSS and change the 10px to whatever works for you. It should push it back to the left. – John Jul 05 '20 at 05:34
0

I change a few lines from your css code:

  1. Removed max-width property from column class.
  2. Removed display: block; from li a class.
  3. Modified ul and li styles with custom id="horizontal-list".
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

  <body>
    <div class="all">
      <div class="row">
        <div class="column">
          <img src="images/hs.jpg" alt="Suisse" style="width: 100%;" />
        </div>
        <div class="column">
          <img src="images/pp.jpg" alt="Plaza" style="width: 100%;" />
        </div>
        <div class="column">
          <img src="images/pa.jpg" alt="Apart" style="width: 100%;" />
        </div>
      </div>
      <div class="logo">
        <img src="images/logo.jpg" alt="logor" />
      </div>
      <div class="menu">
        <ul id="horizontal-list">
          <li><a href="index.html">Home</a></li>
          <li><a href="contact.html">News</a></li>
          <li><a href="formation.html">Formations</a></li>
          <li><a href="inthenews.html">Revue de Presse</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>


* {
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

.all {
  text-align: center;
  background: gray;
}

.row {
  display: flex;
  text-align: center;
}

.column {
  flex: 33.3%;
  padding: 5px;
  filter: brightness(60%);
}

.column:hover {
  filter: brightness(100%);
}

li a {
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: gray;
}

#horizontal-list {
  min-width: 696px;
  list-style: none;
  padding-top: 20px;
}

#horizontal-list li {
  display: inline;
}

.menu {
  display: table; /* Allow the centering to work */
  margin: 0 auto;
}

Hope this helps you.

Jith
  • 361
  • 3
  • 3