CSS Problema em centralizar divs inline block

Abramelin7 · 7 de julho de 2020

Oi pessoal, então, estou tendo um problema, criei 4 divs, dispostas em inline-block, 2 por linha, só que elas não centralizam, eu consigo centraliza-las só dando uma margem em px pré estabelecida, porém o comando auto não funciona, segue HTML e o CSS.

<!DOCTYPE html>
<html>
<head>
	<title>TESTE BORDAS</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="Style/style.css">
</head>
<body>
	<div id="all">
		<div class="title"><h1>Titulo</h1></div>
		<div class="text">
			<p>pfuhew9ui 94u th34pfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfiuyht9u pi34uty9uyh 5jutebknjnjnjphtgfi</p>
		</div>
		<div class="text">
			<p>pfuhew9ui 94u th34pfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfiuyht9u pi34uty9uyh 5jutebknjnjnjphtgfi</p>
		</div>
		<div class="text">
			<p>pfuhew9ui 94u th34pfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfiuyht9u pi34uty9uyh 5jutebknjnjnjphtgfi</p>
		</div>
		<div class="text">
			<p>pfuhew9ui 94u th34pfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfipfuhew9ui 94u th34uyht9u pi34uty9uyh 5jutebknjnjnjphtgfiuyht9u pi34uty9uyh 5jutebknjnjnjphtgfi</p>
		</div>
	</div>
</body>
</html>

E aqui o CSS

* { margin: 0;
padding: 0; }

html,body { height: 100% }

body {background-image: url("https://occ-0-1723-1722.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABYtpvwtZBPU_JzbvMS3b67NQxRdmqUjh2DkEQuBaLQLWYFhMQr-wMbr3oqRJUP-MpJytv15BB9_DSd0ywpDoWJMTbmxw.jpg?r=a71");}

#all { background-color: #ccc;
		margin: 0 auto;
		width: 800px;
		 }

.title h1{ font-size: 30px;
			color: black;
			font-family: Arial;
			text-align: center;
			 }

.text { border: 3px solid red;
		display: inline-block;
		width: 350px;
		text-align: center;
		color: red;
		margin-left: auto;
		margin-right: auto; 
		 }

Gostaria de saber como posso centralizar usando o margin auto em desde usar um valor em px.

WilliamNascimento · 7 de julho de 2020

* { margin: 0;
padding: 0; }

html,body { height: 100% }

body {background-image: url("https://occ-0-1723-1722.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABYtpvwtZBPU_JzbvMS3b67NQxRdmqUjh2DkEQuBaLQLWYFhMQr-wMbr3oqRJUP-MpJytv15BB9_DSd0ywpDoWJMTbmxw.jpg?r=a71");}

#all { background-color: #ccc;
		margin: 0 auto;
		width: 800px;
  		text-align: center;
		 }

.title h1{ font-size: 30px;
			color: black;
			font-family: Arial;
			text-align: center;
			 }

.text { border: 3px solid red;
		display: inline-block;
		width: 350px;
		text-align: center;
		color: red;
		margin-left: auto;
		margin-right: auto; 
		 }

Apenas inseri o text-align na div all , centralizando os texto . Resolveu seu problema mas nao faria em outros casos .

Abramelin7 · 7 de julho de 2020

3 horas atrás, WilliamNascimento disse:


* { margin: 0;
padding: 0; }

html,body { height: 100% }

body {background-image: url("https://occ-0-1723-1722.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABYtpvwtZBPU_JzbvMS3b67NQxRdmqUjh2DkEQuBaLQLWYFhMQr-wMbr3oqRJUP-MpJytv15BB9_DSd0ywpDoWJMTbmxw.jpg?r=a71");}

#all { background-color: #ccc;
		margin: 0 auto;
		width: 800px;
  		text-align: center;
		 }

.title h1{ font-size: 30px;
			color: black;
			font-family: Arial;
			text-align: center;
			 }

.text { border: 3px solid red;
		display: inline-block;
		width: 350px;
		text-align: center;
		color: red;
		margin-left: auto;
		margin-right: auto; 
		 }