CODEWITHSUNDEEP
css
Noha_Farid
Noha_Farid

Reputation: 31

W3.CSS how to make container centered inside another container

I'm using the w3.css, I wanted to make a colored background with width 100%,
and inside it another box with width 80% which will contain the text, so I used the following:

<div class="w3-container w3-light-green">
<div class="w3-container w3-sand w3-center" style="width:80%">
test
</div>
</div>

The problem is that the second container with the 80% width is not centered in the page although I used w3-center. I noticed that w3-center only centers the text, but the container itself isn't centered, so how can I center the container block?

Upvotes: 0

Views: 7738

Answers (5)

Tux
Tux

Reputation: 131

w3-auto is a container for responsive size centered content.

w3-content is a container for fixed size centered content.

https://www.w3schools.com/w3css/w3css_references.asp

w3-auto is

{
  margin-left: auto;
  margin-right: auto;
}

I suggest

<div class="w3-container w3-light-green">
    <div class="w3-container w3-sand w3-auto" style="width:80%">
        test
    </div>
</div>

If you want to center the text, use also w3-center, of course.

Upvotes: 0

Okafor T Kosiso
Okafor T Kosiso

Reputation: 308

`<html> <div class="w3-container w3-light-green">
   <div class="w3-container w3-sand w3-center justify-content-md-center" style="width:80%">
test
   </div>
</div>`

This should do the trick.

Upvotes: 0

Quentin
Quentin

Reputation: 943142

W3.CSS has no class for centring block elements. The only classes which do that have other effects as well.

You'll need to set the left and right margins to auto yourself.

Upvotes: 1

Emirhan &#214;zlen
Emirhan &#214;zlen

Reputation: 484

I don't know much about w3.css there could be a native solution to this but If you prefer hacky way there it is:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-light-green" style="text-align: center">
<div class="w3-container w3-sand w3-center" style="width:80%; display: inline-block;">
test
</div>
</div>
</body>
</html>

https://jsfiddle.net/k2j676ba/

Upvotes: 0

Abhishek
Abhishek

Reputation: 315

I think this should work.. Try It..

<div class="w3-container w3-light-green">
<div class="w3-container w3-sand w3-center" style="width:80%;margin:auto;">
test
</div>
</div>

Upvotes: 6

Related Questions