logo
down
shadow

HTML5 How to align a table to center inside a form?


HTML5 How to align a table to center inside a form?

By : user2951075
Date : November 18 2020, 01:01 AM
Hope that helps When u want to align a table in the center position of the parent, simply use:
css:
code :
margin: 0 auto;
<form >
 <table>

 </table>
</form>
form {
  width:80%; 
  height: 200px; 
  background-color: black;
}

table {
   margin: 0 auto;
   z-index: 1;
   width:50%; 
   height: 50px; 
   background-color: red;
}


Share : facebook icon twitter icon
How to align the inside box to center of the table

How to align the inside box to center of the table


By : J.Doe
Date : March 29 2020, 07:55 AM
it helps some times I have the table, inside the table I have another box , I am struggling to align the box in center of the table. , I assume that your HTML is something like this
code :
<div class="outer_table">
    <div class="inside_box">hello world</div>
</div>
<div class="outer_table">
    <div class="inside_box"><div>hello world</div></div>
</div>
.inside_box {
    border: medium solid;
    display: table;
    font-family: Helvetica-bold;
    font-size: 20.19px;
    height: 100px;
    margin: auto;
    width: 300px;
}
.outer_table {
    border: 1px solid black;
    border-radius: 5px;
    color: #1A6DAC;
    font-size: 24px;
    left: 40px;
    padding: 20px;
    position: absolute;
    top: 260px;
    width: 740px;
}

.inside_box > div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
Can't center align p inside table cell?

Can't center align p inside table cell?


By : Aniket Deshmukh
Date : March 29 2020, 07:55 AM
it helps some times I am doing vertical align so I put my

on table-cell, however when I am trying to center the texts, text-align:center doesn't affect them, but the div on my fourth box as you can see is centered? maybe it's because of the display:table-cell? this is my scss code: , use table-cell in div and remove p

code :
body {
  margin: 0
}
.table {
  display: table;
  width: 100%
}
.table > div {
  text-align: center;
  display: table-cell;
  height: 200px;
  width: 25%;
  padding: 1%;
}
.top {
  background: #ff99b3;
  vertical-align: top
}
.middle {
  background: #ffff99;
  vertical-align: middle
}
.bottom {
  background: #eb99ff;
  vertical-align: bottom
}
.length {
  background: #99ffe6;
}
.length > div {
  background: #ff99b3;
}
<div class="table">
  <div class="top">
    <strong>TOP</strong>
  </div>
  <div class="middle">
    <strong>MIDDLE</strong>
  </div>
  <div class="bottom">
    <strong>BOTTOM</strong>
  </div>
  <div class="length">
    <div>
      <strong>ELEMENT</strong>
    </div>
  </div>
</div>
Center align a display:table-cell inside a td

Center align a display:table-cell inside a td


By : aej411
Date : March 29 2020, 07:55 AM
seems to work fine You need one more element inside td becaue you can't use margin: 0 auto with table-cell. Working code is in below snippet:
code :
td {
  background-color: gray;
  width: 140px;
}

table td.circle div {
  background-color: rgb(92, 177, 251);
  border-radius: 50%;
  color: white;
  font-size: 14px;
  text-align: center;
  display: table;
  margin: 0 auto;
  height: 70px;
  width: 70px;
}

table td.circle p {
  display: table-cell;
  vertical-align: middle;
 }
<table>
  <tr>
    <td class="circle">
      <div>
        <p>
          <b>12</b>
          <br/>
          views
        </p>
      </div>
    </td>
  </tr>
</table>
How to center align a form with labels inside div

How to center align a form with labels inside div


By : Paul David Ridden
Date : March 29 2020, 07:55 AM
Any of those help I want to center align a form with labels inside div.login__box , Slight changes made to your html:
code :
    <head>
    <meta charset="UTF-8">
      <title>#</title>
      <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
        </head>

        <body>
          <div class="jumbotron vertical-center">
            <div class="container">
              <div class="row">
                  <div class="col-md-4 about__box">
                    <div class="about__inner">
                      <div class="about__content">
                        <div class="about__header">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>

                        <div class="about__desc">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-8 login__box">
                    <div class="login__inner">
                      <div class="text-center login__header">
  Authorization
                      </div>
                      <div class="container login__container">
                        <form class="form-horizontal">
                          <div class="form-group">
                            <label class="control-label col-sm-2 col-sm-offset-2" for="login">log in</label>
                            <div class="col-sm-6">
                              <input type="login" class="form-control" id="login" required>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="control-label col-sm-2 col-sm-offset-2" for="pwd" >password</label>
                              <div class="col-sm-6">
                                <input type="password" class="form-control" id="pwd" required>
                                </div>
                              </div>
                              <div class="form-group">
                                <label class="control-label col-sm-2  col-sm-offset-2" for="btn" ></label>
                                <div class="col-sm-4">
                                  <input type="button" class="form-control login__btn-login" id="btn" value="submit">
                                  </div>
                                </div>
                              </form>
                              <div class="control-label col-sm-2"></div>
                              <div class="col-sm-8 login__desc">
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                              </div>
                            <img src="" class="pull-right img-responsive login__img_people">
                            </div>

                          </div>
                        </div>
                    </div>
                  </div>
                </div>
                            <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
              </body>
.form-horizontal .control-label{
  margin-right:0;
}      
How to align the fo:table to the right or to the center inside of the fo:table-cell in XSL-FO?

How to align the fo:table to the right or to the center inside of the fo:table-cell in XSL-FO?


By : Mongi
Date : March 29 2020, 07:55 AM
wish helps you Hmm.. I forget to wrap my fo:table inside of the .
This code is a working example
Related Posts Related Posts :
  • Adding a drop down transition to CSS Menu
  • CSS Media Queries not kicking in when there supposed to
  • Video JS - poster image cover/contain
  • center the div absolute using css but i cannot figure out why its not moving to centre
  • simple css code, i dont understand
  • Autoformatting LESS code with vim
  • Can we use different CSS language/pre processors for different components in a Angular Project
  • combined multiple classes into one css rule
  • Detect mobile device browsers, not only screen width
  • CSS folded corners of div with shadow
  • bootstrap 3: why do my <div>s stack from 992 px width onwards when using "col-sm-6"
  • IE7, IE8 support for css3 media query
  • Gradient ends are blurry when using pixel measurements
  • display bootstrap popovers outside divs with overflow:hidden
  • How to make a non responsive site by using Bootstrap?
  • Selecting an element that doesn't have a child with a certain class
  • Embedded Twitter Widget Height issue
  • Twitter Bootstrap - How to get buttons to be block level only on extra small and small devices
  • How can I add a vertical scrollbar to my div automatically?
  • Trouble changing the link font color using typography.js in gatsby
  • Nesting up scss with main.scss and subcomponent scss files
  • Why does my FontSquirrel font not work?
  • Div positioning (overlays when not wanted)
  • Align button vertically in alert field
  • CSS: display: flex and text ellipsis on the same element
  • Fixed position buttons appearing in incorrect area depending on browser
  • CSS-menu issue in angular project
  • Responsive Website - general enquiries
  • Webkit Scrollbar Buttons only showing horizontal
  • explicitly set a field's width in css to "no-auto"
  • Jekyll accessing page variables from CSS
  • Why did my #wrapDesktopNavBar disappear on desktop view?
  • CSS Menu Multiple Hover Colo(u)rs
  • Line-height works differently on Mac and Windows
  • Resizing an image at will with CSS?
  • CSS Naming Best Practice in MVC Layouts
  • FireFox & Chrome CSS Differs
  • Gradient Border Causing the Border to Disappear
  • How to hide column label on google chart
  • How to change H3 color in bootstrap using CSS file
  • CSS How to align checkbox image
  • css3 jagged edge on left isntead of right
  • display text in a horizontal line , using ng-repeat and bootstrap
  • Css right top corner
  • Bootstrap keep button other border gradient when removing border-left
  • Getting divs in the right postion
  • Rails 4: Sass raises SyntaxError when precompiling assets on server but not on development computer
  • Boostrap css file overrode my css file
  • Why are placeholder selectors inside @keyframes valid .scss?
  • Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?
  • CSS Not Selector: Select All Except Inside of Element
  • CSS Intellisense for files not in solution
  • Overlapping Anchor Tags When Hovering Over One
  • Any way to keep Susy from changing font-size automatically?
  • In Chrome’s user agent stylesheet, why use "-webkit-margin-before" et al instead of just "margin-top"
  • Responsive slanted border
  • SCSS variables - same name, different value in different media breakpoints
  • How to create overlay over div without defining it in HTML
  • Using negative values fails the execution in SASS
  • up/down arrow key issue with typeahead control (angular bootstrap UI)
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org