Can't get a div to centre! School boy I know!

Applications Web Development
1

I have created an example here:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="center.css" />
  </head>
  <body>
    <div class="mc">
      <div class="center">Hello World!</div>
    </div>
  </body>
</html>

CSS

.mc {
  text-align: center;
}

.center {
  text-align: left;
  height: 300px;
  width: 300px;
  background-color: aqua;
}

Why doesn't the .center div get centered horizontally in the .mc div??????

Sorry I know this is very basic

Zigs

2

made a couple of mods to your css file - as below

.mc {
  text-align: center;
}

.center {
  text-align: center; /* was left previously */
  height: 20px; /* was 300 previously */
  width: 200px; /* was 300 previously */
  background-color: aqua;
}

Screenshot 2024-02-29 at 21.51.23

3

Thanks @munkeHoller, been a while how's you?

I wanted the .center div to be centred but the content aligned left

I have found a work around with flex

.mc {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-sub-container {
  max-width: 1920px;
}

Then place what you want in the .flex-sub-container

Not ideal but will do for now!

Thanks for the guidance

Zigs

4

hmm, perhaps below is what you're after -
for demo purposes ...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="ziggelflex.css" />
  </head>
  <body>
	  <div class="mc">WHAT ABOUT ME</div>
      <div class="center">Hello World!</div>
  </body>
</html>

cat ziggelflex.css
.mc {
  display: flex;
  justify-content: center; 
  background-color: lightgreen;
}

.center {
  aligni-self: center; /* was left previously */
  height: 20px; /* was 300 previously */
  width: 200px; /* was 300 previously */
  background-color: aqua;
}

image
image975×114 4.3 KB

5

Thanks again @munkeHoller

temp
temp879×434 3.26 KB

.mc width 100%

.center (for example width 300px)

I have achieved this. But ... If there is a better way would love to know

Ziggy

6

There are a number of ways to do this, some involve adding a JS library (like Bootstrap), and some do not (I think Flexbox has long been a W3C standard, but not sure since I use Bootstrap).

... and others

I generally use Bootstrap Flex because I have used Bootstrap in all my web apps for quite some time, from quick prototypes to full-blown super apps.

<div class="d-flex justify-content-center">...</div>
1 Like
7

Cheers @neo

8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.