CODEWITHSUNDEEP
htmlcsselement
VusicVoid
VusicVoid

Reputation: 61

Align elements to the center of another element

This is my html:

.HCSI {
  background-color: #fff;
  height: auto;
  width: 100%;
  text-align: ;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  border: 2px solid #000;
  border-radius: 25px;
}
.home,
.csgo,
.steam,
.info {
  z-index: 1;
  background-color: rgba(50, 150, 250, 0.5);
  border: 2px solid #000;
  padding: 10px 15px;
  border-radius: 20px;
  float: center;
}
.home:hover {
  background-color: rgba(50, 150, 250, 1);
}
.HCSI,
li {
  color: #000;
  padding: 0px;
  display: inline-block;
  font-size: 21px;
  font-weight: 100;
  letter-spacing: 2.5px;
  word-spacing: 90px;
}
<!DOCTYPE html>
<html>

<head>
  <title>VusicVoid</title>
  <link href="https://fonts.google.com/specimen/Shrikhand" rel="stylesheet">
</head>

<body>
  <div class="HCSI">
    <ul>
      <a href="">
        <li class="home">Home</li>
      </a>
      <a href="http://store.steampowered.com/app/730/">
        <li class="csgo">Csgo</li>
      </a>
      <a href="">
        <li class="steam">Steam</li>
      </a>
      <a href="">
        <li class="info">Info</li>
      </a>
    </ul>
  </div>
</body>

</html>

If you put these in a code tester, there should be 4 blue boxes inside of a white one but my problem is I can't get all 4 boxes to align with the center of the white one. I'm trying to get the padding on all sides of the blue boxes to be the same.

Upvotes: 6

Views: 1825

Answers (4)

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You can use CSS Flexbox.

Just apply the Flex container (display: flex) properties with Flex Justify (justify-content: center) and Flex Alignment (align-items: center) Properties.

Have a look on how I've used them in the code below:

/* Parent Element (Flex Container) */
.HCSI {
  display: flex;
  justify-content: center; /* Center the content horizontaly */
  padding: 20px;
  border: 2px solid #000;
  border-radius: 25px;
}

/* Resetting <ul> (Flex Container) */
ul {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* <li> Styles */
ul li {
  color: #000;
  margin: 0 10px;
  font-size: 21px;
  font-weight: 100;
  letter-spacing: 2.5px;
  background-color: rgba(50, 150, 250, 0.5);
  border: 2px solid #000;
  border-radius: 20px;
}

/* <a> Styles */
ul li a {
  display: block;
  color: #000;
  padding: 10px 15px;
  border-radius: 18px;
  text-decoration: none;
}

/* <a> Hover Styles */
ul li a:hover {
  text-decoration: none;
  background-color: rgba(50, 150, 250, 1);
}
<div class="HCSI">
  <ul>
    <li class="home"><a href="">Home</a></li>
    <li class="csgo"><a href="http://store.steampowered.com/app/730/">Csgo</a></li>
    <li class="steam"><a href="">Steam</a></li>
    <li class="info"><a href="">Info</a></li>
  </ul>
</div>

Learn more about CSS Flexbox

Hope this helps!

Upvotes: 2

Jishnu V S
Jishnu V S

Reputation: 8409

Try with this answer give ul text-align:center; it will make the anchors center and add text-decoration:line-through; to a tag that makes the line vertically centered

/* styleSheet */

.HCSI {
	background-color: #fff;
	height: auto;
	width: 100%;
 text-align:;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 0;
	border: 2px solid #000;
	border-radius: 25px;
}
.HCSI ul {
	padding-left: 0;
	text-align: center;
}
.HCSI ul a {
	text-decoration:line-through;
}
.home, .csgo, .steam, .info {
	z-index: 1;
	background-color: rgba(50, 150, 250, 0.5);
	border: 2px solid #000;
	padding: 10px 15px;
	border-radius: 20px;
	float: center;
}
.home:hover {
	background-color: rgba(50, 150, 250, 1);
}
.HCSI, li {
	color: #000;
	padding: 0px;
	display: inline-block;
	font-size: 21px;
	font-weight: 100;
	letter-spacing: 2.5px;
	word-spacing: 90px;
}
<!-- HTML -->

<!DOCTYPE html>
<html>
<head>
<title>VusicVoid</title>
<link href="https://fonts.google.com/specimen/Shrikhand" rel="stylesheet">
</head>
<body>
<div class="HCSI">
  <ul>
    <a href="">
    <li class="home">Home</li>
    </a> <a href="http://store.steampowered.com/app/730/">
    <li class="csgo">Csgo</li>
    </a> <a href="">
    <li class="steam">Steam</li>
    </a> <a href="">
    <li class="info">Info</li>
    </a>
  </ul>
</div>
</body>
</html>

Upvotes: 2

mike
mike

Reputation: 431

If you want the boxes clustered in the center with a defined gap this will do the trick

.HCSI ul {
  display: table;
  margin: 0 auto;
  padding-left: 0;
}

.HCSI ul a {
  /* Adjust this value to adjust the spacing around the buttons */
  padding: 20px;
  display: table-cell;
}

If you want the boxes spread across the bar evenly then you could add this instead

.HCSI ul {
  display: table;
  margin: 0 auto;
  padding-left: 0;
  width: 100%;
}

.HCSI ul a {
  padding: 20px;
  display: table-cell;
  text-align: center;
}

Upvotes: 1

Yahya Essam
Yahya Essam

Reputation: 1912

Just fix text-align make it text-align:center;

.HCSI {
  background-color: #fff;
  height: auto;
  width: 100%;
  text-align:center ;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  border: 2px solid #000;
  border-radius: 25px;
}

Upvotes: 2

Related Questions