I have 5 logos that i need to place them aligned horizontally at the centre of the element-CodePudding

i am making a porfolio website and using a (HTML,CSS,JS) logo that i need to place them at the centre of the element. i have used the text-align: center but this is not working. i am new into the development.

i have tried text-align : center; but this is not working.

CodePudding user response：

Text-align is for text, it sounds like you are taling about some form of image elements, that will not work.

Hard to give you an exact solution without an example, but I would use flex. You could try that out: https://www.w3schools.com/cssref/css3_pr_flex.asp

CodePudding user response：

You could use flex for this purpose, warp the logos inside a parent div.

the align then vertically with align-items: center; and horizontally with justify-content:space-around;

like this :

body{
  padding:0;
  margin:0;
  height:100vh;
  width:100vw;
  display:grid;
  place-items:center;
}
.parent{
  background-color:#6cba70;
  display:flex;
  width:400px;
  height:200px;
  justify-content:space-around;
  align-items: center;
}

<div >
  <div>HTML</div>
  <div>CSS</div>
  <div>JS</div>
</div>

CodePudding user response：

Based on this you can do as follow

<html>
  <body>
    <style>
    .logo {
      border: 1px solid black;
      width: 200px;
     }
     #logo-container {
      border: 1px dashed red;
      display: flex;
      justify-content: center;
      text-align: center;
     }
    </style>

    <div id="logo-container">
      <div class='logo'>Logo 1</div>
      <div class='logo'>Logo 2</div>
      <div class='logo'>Logo 3</div>
      <div class='logo'>Logo 4</div>
      <div class='logo'>Logo 5</div>
    </div>
  </body>
</html>