Text is not centered within a div.Row element

Asked

Viewed 60 times

0

I’m creating a sort of online wallet and I’m organizing the Layout. However it seems that Bootstrap or CSS is not able to interpret my command. It does not centralize WEEK texts in the middle of ROW.

  body {

   margin: 0px;
}

#navbar {
position: absolute;
top: 165px;
width: 100%;
height: 35px;
background-color: #59b210;
}

#coluna {

margin-top: 30px;
}

#coluna1 {

height: auto;
background-color: yellow;


}

#coluna2 {

height: auto;
background-color: pink;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Menu</title>
<link rel="stylesheet" href="css.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</head>
<body>


<div id="coluna">
	<div class="container-fluid">
		<div class="row">
			<div class="col">
				<h2><p class="text-center">NOME1</p><h2>
			</div>
			<div class="col">
				<h2><p class="text-center">NOME2</p></h2>
			</div>
		</div>
	</div>
</div>


<div class="container-fluid">
	<div class="row">
		<div class="col">
			<h6><p class="text-center"> Gastos Mensais</p></h1>
		</div>
		
		<div class="col">
			<h6><p class="text-center"> Gastos Mensais</p></h1>
		</div>
	</div>
</div>

<div class="container">
<div class="row">
	<div id="coluna1" class="col">	
		<div class="row">
			<p class="text-center">Semana 1</p>
		</div>
		<div class="row">
			<p class="text-center">Semana 2</p>
		</div>
		<div class="row">
			<p class="text-center">Semana 3</p>
		</div>
		<div class="row">
			<p class="text-center">Semana 4</p>
		</div>
		<div class="row">
			<p class="text-center">Semana 5</p>
		</div>
	</div>
	
	<div id="coluna2" class="col">
		<div class="row">
			<p class="text-center">Semana 1</p>
			</div>
			<div class="row">
				<p class="text-center">Semana 2</p>
			</div>
			<div class="row">
				<p class="text-center">Semana 3</p>
			</div>
			<div class="row">
				<p class="text-center">Semana 4</p>
			</div>
			<div class="row">
				<p class="text-center">Semana 5</p>
			</div>

	</div>
</div>
</div>
</body>
</html>

html css

2 answers

1


Take off that class row of divs who have the p inside. You should not leave loose elements inside a row, in fact the direct son of a row must be a col.

In a grid layout, content must be placed Within columns and only columns may be immediate Children of rows.

Translating: "In a layout of grid, the content must be placed within columns and only the columns may be immediate children of rows."

Official source of Bootstrap itself: https://getbootstrap.com/docs/4.0/layout/grid/

But simply remove the class row of div father of p, or even delete this div, because it makes no sense in the code, since an element p already occupies 100% of the width available.

body {

    margin: 0px;
}

#navbar {
    position: absolute;
    top: 165px;
    width: 100%;
    height: 35px;
    background-color: #59b210;
}

#coluna {

    margin-top: 30px;
}

#coluna1 {

    height: auto;
    background-color: yellow;


}

#coluna2 {

    height: auto;
    background-color: pink;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

    <div id="coluna">
        <!-- <div class="container-fluid"> -->
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2>
                        <p class="text-center">NOME1</p>
                    </h2>
                </div>
                <div class="col">
                    <h2>
                        <p class="text-center">NOME2</p>
                    </h2>
                </div>
            </div>
        </div>
    </div>


    <!-- <div class="container-fluid"> -->
    <div class="container">
        <div class="row">
            <div class="col">
                <h6>
                    <p class="text-center"> Gastos Mensais</p>
                </h6>
            </div>

            <div class="col">
                <h6>
                    <p class="text-center"> Gastos Mensais</p>
                </h6>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div id="coluna1" class="col">
                <p class="text-center">Sem Div por fora do P</p>

                <p class="text-center">Semana 2</p>

                <p class="text-center">Semana 3</p>

                <p class="text-center">Semana 4</p>

                <p class="text-center">Semana 5</p>
            </div>

            <div id="coluna2" class="col">
                <div class="">
                    <p class="text-center">Com Div por fora do P</p>
                </div>
                <div class="">
                    <p class="text-center">Semana 2</p>
                </div>
                <div class="">
                    <p class="text-center">Semana 3</p>
                </div>
                <div class="">
                    <p class="text-center">Semana 4</p>
                </div>
                <div class="">
                    <p class="text-center">Semana 5</p>
                </div>

            </div>
        </div>
    </div>

  • Why "must it be"? D

  • 1

    @Andersoncarloswoss woke up early boy, haha! Well I made one Edit in the answer explaining the "should be" ;)

  • Thank you very much brother and sorry for the juvenile mistake kkkk hugs.

  • @Brunomuniz tranquil friend, when we use these frameworks you some rules that we end up being obliged to follow, abs

0

Its elements p are not 100% within the .row. Try creating this rule:

.col .text-center {
  width: 100%;
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.