Wyśrodkowanie tekstu

Question

Witam, z ikonkami sobie poradziłem. Niestety teraz mam problem z tym tekstem no za nic nie mogę go wyśrodkować.   tile 5(duże szare kwadraty) tile 2 (małe niebieskie kwadraty)

		
		<div class="square">
				<div class="tile5"><a href="" class="sociallink"><i class="icon-search-1"><center><b>Poszukuję...</center></i></div></a></b>
			
			
				<div class="tile2"><a href="odznaki" class="sociallink"><i class="icon-award"><center><b>Odznaki</center></i></div></a></b>
				<div class="tile2"><a href="faq" class="sociallink"><i class="icon-help"><center><b>Najczęstsze pytania</b></center></i></div></a>
				<div class="tile2"><a href="regulamin" class="sociallink"><i class="icon-attention-1"><center><b>Regulamin</center></b></i></div></a>
				<div class="tile2"><a href="kontakt" class="sociallink"><i class="icon-mail-alt"><center><b>Kontakt</b></center></i></div></a>
				<div style="clear:both;"></div>
				
			
				
		</div>
		<div class="square">
				<div class="tile5"><a href="uslugi-i-firmy" class="sociallink"><i class="icon-users"><center><b>Firmy i Usługi</center></i></div></a></b>
			
				<div class="tile2"><a href="uslugi" class="sociallink"><i class="icon-star"><center><b>Nasze Usługi</center></i></div></a></b>
				<div class="tile2"><a href="co-nas-wyroznia" class="sociallink"><i class="icon-user-o"><center><b>Co nas wyróżnia?</b></center></i></div></a>
				<div class="tile2"><a href="https://www.facebook.com/blocksadcom/" class="sociallink"><i class="icon-facebook-1"><center><b>Facebook</center></b></i></div></a>
				<div class="tile2"><a href="https://www.youtube.com/channel/UC1-ZSYug_OMcH9p2Q79C7Yg" class="sociallink"><i class="icon-youtube-2"><center><b>YouTube</b></center></i></div></a>

.tile5
{
	margin: auto;
	width: 420px;
	height: 244px;
	background-color:  #555555;
	text-align: center;
	padding: 30px;
	font-size: 40px;
	font-family: 'Josefin Sans', sans-serif;
}


.tile2
{
			margin: 10px;
			width: 230px;
			height: 142px;
			background-color: #3299CC;
			float: left;
			text-align: center;
			font-size: 20px;
			color: black;
			font-family: 'Josefin Sans', sans-serif;
}

 

Answer 1

Najłatwiej będzie jak użyjesz flexboxa, jeżeli nie wiesz jak go stosować to powinno ci pomóc: codepen.io

Żeby lepiej ci to zobrazować, stworzyłem kod dla przycisku wyszukaj: 

    <div class="big">
        <i class="icon-search"></i>
        <span class="big-name">Poszukuję...</span>
    </div>

.big {
    width: 200px;
    height: 200px;
    background: #00b7ff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.icon-search {
    color: #ffffff;
    font-size: 80px;
}

.big-name {
    color: #ffffff;
    font-size: 20px;
}

 

Comments

Stworzyłem w css tekst1 i tekst2 dla dużych i małych kwadratów, pobawiłem się marginami, już jakoś to wygląda, ale sprawdzę to

---

Być może przyda się flexbox w innym projekcie :)

---

Dzięki bardzo ;)

Answer 2

z którym tekstem, wszystko chcesz wyśrodkować tak?

Comments

Tak, na każdym kwadracie. Tak Aby na tych szarych tekst był pod Lupą i ludzikami
a niebieskie mają być po lewej stronie

---

no to tak jest, napisz precyzyjnie

te duże masz wyśrodkowane i w nich wszystko jest wyśrodkowane

te małe niebieskie masz po lewej i w nich wyśrodkowane

---

A no tak, zapomniałem zdjęcia.... 

---

Twój kod html jest niepoprawny, w złych miejscach kończysz znaczniki. Według zasad HTML5 nie powinieneś używać znacznika <center> i zastąpić go w css.

Tak powinien wyglądać kod

        <div class="tile2"><a href="odznaki" class="sociallink"><i class="icon-award"><b>Odznaki</b></i></a></div>

 

---

Pogrubienie tekstu też można zrobić w css.

---

Dzięki za radę, no ale to nie pomoże mi z moim problemem

---

Jeden z lepszych sposobów na, między innymi, środkowanie elementów:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

a to chcesz żeby tak było jak na zdjęciu?