1

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.

Ravi Dhingra
  • 25
  • 3

3 Answers3

2

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>
dudung
  • 499
  • 2
  • 17
1

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 class="parent">
  <div>HTML</div>
  <div>CSS</div>
  <div>JS</div>
</div>
Dhaifallah
  • 1,437
  • 1
  • 5
  • 19
0

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

corn_not_slapped
  • 1