Center alignment problem

hello I’m creating a form with elements. After creating the elements, I tried to bump the button to the center, but it probably interferes with another command somewhere. do you know anyone where there could be a mistake?

* {
	margin: 0; 
	padding: 0;
	box-sizing: border-box;
}

body {
	margin: 0;
	background: #ffffff;
	font-family: sans-serif;
	font-weight: bold;
}



header {
  background: #17a2b8;
}

.container {
	width: 80%;
	margin: 0 auto;
}



header::after {
  content: '';
  display: table;
  clear: both;
}

.nazev {
  float: left;
  padding: 20px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 30px;

  position: relative;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

header h1 {
color: #ffffff;
font-size: 28px;
}




.form {
	width: 45%;
	margin: 45px auto;
    padding: 70px;
	border: 1px solid #ccc;
    border-radius: 0px;
    box-shadow: 0px 0px 8px 5px rgba(0, 0, 0, .2);
    background-color: #FFFFFF;
}


.form-title {
	font-size: 28px;
	text-align: center;
}


.form-group {
	margin: 20px 0;
}

.form-group label {
	font-family: sans-serif;
	font-size: 16px;
	font-weight: bold;	
}

.input-lg {
    padding: 10px 16px;
    line-height: 1.3333333;
 }

.text-lg {
    padding: 10px 16px;
    line-height: 1.3333333;
 }

.select-lg {
    padding: 10px 16px;
    xline-height: 1.3333333;
 }

.form-control {
	font-family: sans-serif;
	font-size: 16px;
	display: block;
	width: 100%;
	border: 1px solid #ccc;
	margin-top: 5px;
	border-radius: 6px;
}

.input-lg:focus {
    outline: none !important;
    border:1px solid #7aa9f5;
    box-shadow: 0 0 6px #4D90FE;
}

.button {
    color: #ffffff;
    background-color: #17a2b8;
    font-family: sans-serif;
	font-size: 16px;
  	font-weight: normal;
  	text-decoration: none;
  	letter-spacing: 1px;
  	padding: 12px 0;
	width: 120px;
	margin: auto;
	text-align: center;
	border-style: none;
	xborder-radius: 21px;
    xdisplay: inline-block;
    position: relative;

}

.button:hover {
  background: #17b8b3;
  font-weight: normal;
}


Hi there @marek127523. Welcome to the forums. Without seeing your HTML I’m only guessing, but you could try margin: 0 auto;.

You will need to set the button to display:block for the auto margins to work :slight_smile:

2 Likes

Hi, margin didn’t work :/. There is my HTML code.

<!DOCTYPE html>
<html lang="cs">
	<head>
		<title>Maturitní práce</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/detail_mp.css">
	</head>
	<body>
<header>	
	<div class="container"> 
		<h1 class="nazev">ŠIS - Školní informační systém</h1>  
		<nav>
			<ul>
			<li>
			<a href="#">MAREK ŠTĚPÁNEK</a>
			</li>
			<li>
			<a href="#">DOMŮ</a>
			</li>
			<li>
			<a href="#">ODHLÁSIT</a>
			</li>
			</ul>
		</nav>
	</div>	     
</header>

<form class="form">

<h1 class="form-title">Maturitní práce</h1>

	<div class="form-group">
      <label for="detailprace">Téma maturitní práce</label>
      <input class="form-control input-lg" type="text" value="Fiktivní výstava spojená s kulturní akcí">
    </div>

    <div class="form-group">
      <label for="zadaniapokyny">Zadání a pokyny</label>
      <textarea rows="8" class="form-control text-lg">Zpracujte projekt:
	Výstava na téma "Lucemburkové v českých zemích".
	Uskuteční se ve dnech 4. 5. 2019 až 29. 9. 2019 v prostorách státního hradu Karlštejna.
	Osnova projektu:
	1)  Kulturní program pro zahájení výstavy.
	2)  Logo výstavy.
	3)  Vytvoření plakátu, letáčku a upomínkového předmětu. 
	4)  Vytvořte webové stránky výstavy. </textarea>
    </div>
    
    <div class="form-group">
      <label for="rozsahprace">Rozsah práce</label>
      <textarea class="form-control text-lg">Výsledky práce zpracujte do textu o délce 10 až 15 stran. 
Zprávu odevzdejte ve dvou tištěných exemplářích a v elektronické podobě.</textarea>
    </div>
    
    <div class="form-group">
      <label for="detailnizadani">Detailní zadání</label>
      <textarea rows="8" class="form-control text-lg">Zpracujte:
	1)  Logo výstavy; logo musí odpovídat době Lucemburků a musí být heraldicky správné, logo zakomponujte do plakátu, který bude vylepován na plakátovacích plochách ve formátu A2 na výšku.
	2)  Webové stránky výstavy a zapracujte do nich tři vámi zvolené vhodné výstavní exponáty, navrhněte vhodné emotivní osvětlení pro zvolené exponáty.
	3)  Navrhněte a vytvořte vhodný dvojjazyčný leták k výstavě v anglickém a českém jazyce, vhodný pro incomingové cestovní kanceláře a agentury. 
	4) Vytvořte návrh reklamního a upomínkového předmětu ve formě malé oboustranné papírové vlaječky na špejli (o přibližné velikosti A6), s použitím odpovídající heraldické symboliky; vlaječky budou rozdávány kostýmovanými pážaty před příchodem císařského průvodu divákům a těmi budou diváci vítat císaře Karla IV. projíždějícího na koni.

	Výsledky práce zpracujte do textu o délce 10 - 15 normostran.
	Zprávu odevzdejte ve dvou tištěných exemplářích a v elektronické podobě.
	Výstava se uskuteční na státním hradě Karlštejně.
	Datum slavnostního zahájení výstavy:                 sobota 4. 5. 2019 v 10:00 hodin na hlavním nádvoří hradu Karlštejna spojené s bohatým kulturním programem.

	Datum předpokládaného ukončení výstavy:             neděle 30. 5. 2019

	Program zahájení výstavy:
	10:00 h Slavnostní zahájení výstavy samotným císařem Karlem IV. za doprovodu středověké hudby.
	10:30 - 11:30 h Otevření a prohlídka výstavy.
	22:00 h Ukončení programu.</textarea>
    </div>

<div class="form-group">
      <label for="terminodevzdani">Termín odevzdání</label>
      <input class="form-control input-lg" id="inputto" type="text" value="15. 4. 2020 do 12:00 hodin">
    </div>
    
 <div class="form-group">
      <label for="konzultant">Konzultant</label>
      <input class="form-control input-lg" id="inputk" type="text" placeholder="Konzultant">
    </div>     
    
<div class="form-group">
	<label for="Oponent">Oponent</label>
  <select class="form-control select-lg">
    <option value="0" selected disabled>Vyberte oponenta:</option>
    <option value="238">Adriana Takáčová</option>

	</select>
</div>
   
<div class="form-group">
	<label for="Oponent">Žák</label>
  <select class="form-control select-lg">
    <option value="0">Vyberte žáka:</option>
	</select>
</div>		 
	
<div class="form-group">
      <label for="zadavatel">Zadavatel</label>
      <input class="form-control input-lg" type="text" value="Zdeněk Rýgl" disabled>
</div>	  


<div class="form-group">
	<label for="rocnik">Ročník</label>
  <select class="form-control select-lg">
    <option value="0">Vyberte ročník</option>
    <option value="238">2015/2016</option>
	<option value="128">2016/2017</option>
	<option value="217">2017/2018</option>
	<option value="333">2018/2019</option>
	<option value="297" selected>2019/2020</option>
	</select>
</div>
	
<div class="form-group">
	<label for="trida">Třída</label>
  <select class="form-control select-lg">
    <option value="0">Vyberte třídu</option>
    <option value="238">DN2</option>
	<option value="128">ME2Z</option>
	<option value="217">ME4</option>
	<option value="333" selected>MT4</option>
	<option value="297">SE4</option>
	<option value="217">ZT2</option>
	<option value="333">ZT3</option>
	<option value="297">ZT4</option>
	</select>
</div>
    
    <button class="button">← Zpět</button>
    <button class="button">Uložit</button>
    
</form>
</body>
</html>

Thanks a lot! And do you know ho can I create indentation? The buttons are united now.

I notice you have two buttons in the html and to center both of those you could do this:

.buttons{text-align:center;}

 <div class="buttons">
    <button class="button">← Zpět</button>
    <button class="button">Uložit</button>
  </div>

You would then remove the display:block from the buttons and leave them as inline elements.

It depends on exactly you mean as we seem to have posted at the same time so can you explain in a bit more detail what needs to happen now :slight_smile:

2 Likes

Thank you so much, it helped!!:slight_smile: :pray: :pray:

1 Like

I see that PaulDB answered your question but if you wanted to do it differently you could use

<center> </center>

tags

Differently, yes, BUT …

Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the CSS text-align property, which can be applied to the <div> element or to an individual <p> . For centering blocks, use other CSS properties like margin-left and margin-right and set them to auto (or set margin to 0 auto ).

3 Likes