logo
Tags down

shadow

HTML center element inside div


By : Dennis
Date : May 03 2020, 08:01 AM

I try to make  two styled submit buttons (xx1 and xx2) to be centered inside their div (MainDiv).

I've tried several css things with no success. margin: auto; or margin: 0 auto; should do the trick. Does anybody know why following code is not centering inputs inside each MainDiv?

.container{
    display:flex;
	align-items: center;
}

.MainDiv {
	height:25vh;
	background-color:transparent;
	width:50%;
	margin: 0 auto;
}
.SubmitGral {
	margin: 0 auto;
	height:90%;
	width:70%;
	border:none;
    background-color:#6c3;
	font-size:1.4em;
	white-space: normal;
	word-wrap: break-word;
    -o-transition: opacity .2s ease-in; 
    -moz-transition: opacity .2s ease-in;
    -webkit-transition: opacity .2s ease-in; 
    transition: opacity .2s ease-in; 	
}

<div class="container">
	<div class="MainDiv"><input name="Master" type="Submit" class="SubmitGral" value="XX1"></div>
	<div class="MainDiv"><input name="Master" type="Submit" class="SubmitGral" value="XX2"></div>
</div>

fiddle here

thanks for any help

Answer :

You just need to add text-align:center to .MainDiv class and you are done.

See here

.MainDiv {
    height:25vh;
    background-color:transparent;
    width:50%;
    margin: 0 auto;
  text-align:center;
}


Share : facebook icon twitter icon
Related Posts Related Posts :
  • clear array after form submit
  • pass url variable to javascript
  • access data using api
  • div position fixed css
  • add horizontal line between two div
  • disable toggle button css
  • css fixed line height
  • background image not working
  • table cell border
  • text line break css
  • overlay div on div
  • text direction rtl css
  • javascript convert string to an object
  • bind inner div click to outer div
  • jquery ajax oncomplete
  • how to use promise in for loop
  • jquery get element using variable
  • javascript send textbox value
  • pass div class content to another class or id
  • css new line after element
  • css calc not working properly
  • link disabled jquery
  • sql join table to subquery
  • MS Access SQL Issue with OR AND Operators
  • set textarea value using php
  • php merge two arrays into one
  • php form with google captcha
  • update current row in php
  • php date format mysql
  • mysql pdo select query
  • php function return an array
  • PHP mysqldump database to sql file
  • display image query
  • php create array using foreach loop
  • associative array php
  • group_concat in mysql laravel
  • php array_push empty
  • mysql on update cascade not working
  • pdo insert prepared statement
  • mysql insert ignore vs on duplicate key
  • mysql insert into existing row
  • mysql multi insert query
  • mysql group by show all rows
  • php change profile image
  • combine multiple arrays into one array php
  • how to sum values in an array
  • how to get sum of the total time
  • How to Create Facebook live stream without notification using API ?
  • on button click make div visible
  • css affect another element on hover
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org