Wyśrodkowywanie inputa

Question

Witam, mam problem z wyśrodkowaniem inputa radio oraz submit

<div class="checkbox">
<input type="radio" name="sitesearch" value=""  id="sitesearch1" checked="checked" /> <label for="sitesearch1">W Google</label>
<input type="radio" name="sitesearch" value="masterdally.com" id="sitesearch0"  /> <label for="sitesearch0">Na Master Dally</label>
					
</div>

<input type="submit" value="Szukaj !"/>

.checkbox
{
    background-color:#00B3FF;
	border:3px solid #0733AD;
    display:inline-block;
    padding:15px 15px;
    font-size:16px;
	border-radius:28px;
	margin-left:auto;
	margin-right:auto;
	width: 250px;
}	

input[type=submit]
{
    background-color:#44c767;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    border:3px solid #009DFF;
    color:#ffffff;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
}

 

Z góry dzięki za pomoc

Answer 1

Nie mogłeś wyśrodkować przez display: inline-block;, który zachowuje się podobnie do float: left;

Ja żeby pozbyć się tego użyłem flexboxa po prostu, aczkolwiek można na przykład przy float lub inline-block załatwić sprawę tworząc rodzica (tutaj stworzyłem form) i nadać mu jakąś konkretną szerokość i wyśrodkować wtedy przez margin: 0 auto;

https://codepen.io/anon/pen/zzYjja

Comments

a jak dołożę do tego formularza 3 inputa to jak mam zrobić żeby wszystko nie było w jednej lini

<div class="wyszukiwarka">

	<form class="form" target="_blank" action="https://www.google.com/search" method="get" >

	<input class="center" type="text" placeholder=" Wprowadź adres lub szukaj !" autofocus name="q" size="50"/>

	<div class="checebox">
					
			<input type="radio" name="sitesearch" value="" id="sitesearch1" checked="checked" /> <label for="sitesearch1">W Google</label>
										
			<input type="radio" name="sitesearch" value="masterdally.com" id="sitesearch0" /> <label for="sitesearch0">Na Master Dally</label>
					
						</div>
						 
	<input type="submit" value="Szukaj !" />


					
	</form>
			
</div>

 

input[type=text]
{

	border: 5px solid #00B3FF;
	padding: 15px;
	background:#D7DADB no-repeat scroll left center;
	font-size: 40px;
    width: 90%;
}

input[type=text]:focus
{
	box-shadow: 0px 0px 10px 2px #00B3FF;
}

input[type=submit] 
{
	background-color: #44c767;
	-moz-border-radius: 28px;
	-webkit-border-radius: 28px;
	border-radius: 28px;
	border: 3px solid #009DFF;
	color: #ffffff;
	font-size: 17px;
	padding: 16px 31px;
	text-decoration: none;
}

.form 
{
  display: flex;
  justify-content: center;
}

.checebox
{
	text-algin: center;
	background-color: #00B3FF;
	border: 3px solid #0733AD;
	padding: 15px 15px;
	font-size: 16px;
	border-radius: 28px;
	width: 250px;
}
	

.wyszukiwarka
{
	text-align: center;
	
}

.center
{
	display: block;
	text-algin: center;
	margin: auto;
}

 

---

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ tutaj pokazane są różne właściwości flexboxa całkiem dostępnie, a nie za bardzo rozumiem co ma być nie w jednej linii

---

Tak jest

https://zapodaj.net/8d4a221e1ebbd.png.html

taj chcę zrobić

https://zapodaj.net/e060fe26fc0b4.png.html

---

W tym konkretnym przypadku wystarczy dać wrapowanie (to co się nie mieści w danej linijce przechodzi do kolejnej)

https://codepen.io/anon/pen/ZyOYzq

---

Dzięki

Answer 2

Moim zdaniem najłatwiej opakować tego inputa i checkboxa jakimś div'em.

<div class="myContainer">
     //tutaj checkbox i input
</div>

I dodać styl:

.myContainer{
    text-align: center;
}

Chyba, że chcesz żeby wszystko na stronie było wyśrodkowane to wtedy nie musisz używać dodatkowego div'a, tylko dodać powyższy styl do body.

Answer 3

<div align="center" class="checkbox">
<input type="radio" name="sitesearch" value=""  id="sitesearch1" checked="checked" /> <label for="sitesearch1">W Google</label>
<input type="radio" name="sitesearch" value="masterdally.com" id="sitesearch0"  /> <label for="sitesearch0">Na Master Dally</label>
<input type="submit" value="Szukaj !"/>
</div>