3 Replies - 597 Views - Last Post: 12 April 2019 - 06:03 AM Rate Topic: -----

#1 DarenR   User is online

  • D.I.C Lover

Reputation: 624
  • View blog
  • Posts: 4,166
  • Joined: 12-January 10

need a css master -- how do i center these divs

Posted 11 April 2019 - 12:31 PM

i am trying to center these divs but they keep going off center. image is attached. i would like the one on the right to be more to the right and the one on the left more to the right so they would be like this example:https://codepen.io/Merri/pen/vHJtf

.wrapper {
    overflow: hidden; /*make sure the wrapper has no dimension*/
    clear: both;
    width: 95vw;
    margin: 0 auto;
    /*margin-bottom: 10px;
    clear: both;
  
    margin-left: auto;
    margin-right: auto;
    width: 100%;*/
    background: gray;
    text-align: center;
}
.item {
    
    width: 37vw;
    height: auto;
    /*background: lightgreen;*/
    margin: 0 20px;
    display: inline-block;
    text-align: left;
}



divs:

 <div class="wrapper">
          <div class="item" >
              <ul style="list-style-type:none;">
              <li><asp:Label ID="lblHeaderMill" runat="server" Width="170px" CssClass="HeaderTextStyle" Text="Mill:" ></asp:Label><asp:TextBox ID="txtHeaderMill" runat="server" CssClass="HeaderTextStyle2" Enabled="False" ></asp:TextBox></li>    
              <li></li>
              <li><asp:Label ID="lblHeaderOperator" runat="server" Width="170px" CssClass="HeaderTextStyle" Text="Operator:"></asp:Label><asp:TextBox ID="txtHeaderOperator" runat="server" CssClass="HeaderTextStyle2" Enabled="False" Width="150px"></asp:TextBox></li>
              <li></li>
              <li><asp:Label ID="lblHeaderShift" runat="server"  Width="170px" CssClass="HeaderTextStyle" Text="Shift:"></asp:Label><asp:TextBox ID="txtHeaderShift" runat="server" CssClass="HeaderTextStyle2" Enabled="False" Width="100px"></asp:TextBox></li>
              <li><asp:Label ID="lblHeaderMaterial" runat="server" CssClass="HeaderTextStyle" Text="Material:"></asp:Label><asp:TextBox ID="txtHeaderMaterial" runat="server" CssClass="HeaderTextStyle2" Enabled="False" Width="100px"></asp:TextBox></li>
              </ul>
          </div>
          <div class="item" >
              <ul style="list-style-type:none;">
                  <li> <asp:Label ID="lblMill" runat="server" Text="Mill Number:" Width="170px" CssClass="HeaderTextStyle2"></asp:Label> <asp:TextBox ID="txtMill" runat="server" CssClass="textBoxStyle"  ></asp:TextBox></li>    
                  <li> <asp:Label ID="lblMillID" runat="server"  CssClass="HeaderTextStyle" ForeColor="Red"></asp:Label></li>
                  <li> <asp:Label ID="lblOperator" runat="server" Text="Operator ID:" Width="170px" CssClass="HeaderTextStyle2"></asp:Label>  <asp:TextBox ID="txtOperator" runat="server" CssClass="NormalTextStyle" Width="100px" ></asp:TextBox></li>
                  <li> <asp:Label ID="lblOperatorName" runat="server"  CssClass="HeaderTextStyle" ForeColor="Red"></asp:Label></li>
                  <li> <asp:Label ID="lblShift" runat="server" Width="170px" CssClass="HeaderTextStyle2" Text="Shift:"></asp:Label>  <asp:TextBox ID="txtShift" runat="server" CssClass="NormalTextStyle" Width="100px" ></asp:TextBox></li>
                  <li> <asp:Label ID="lblShiftNumber" runat="server" CssClass="HeaderTextStyle" ForeColor="Red" ></asp:Label> </li>
              </ul>
          </div>


headerstyle just changes the size of the text and the color

Attached image(s)

  • Attached Image

This post has been edited by DarenR: 11 April 2019 - 12:34 PM


Is This A Good Question/Topic? 0
  • +

Replies To: need a css master -- how do i center these divs

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5434
  • View blog
  • Posts: 14,366
  • Joined: 18-April 07

Re: need a css master -- how do i center these divs

Posted 11 April 2019 - 01:13 PM

I tried to boil down the ideas into two examples. The first one is boiled down from the link you shared... the second is another way to do it where you have a parent wrapper, two elements that are percentage width and uses margin: 0 auto.

https://codepen.io/Martyr2/pen/mgwyGz

Each have their advantages and draw backs. The second one is a little more flexible but uses a few messy percentages, the first one is more solid but less flexible.
Was This Post Helpful? 1
  • +
  • -

#3 smendoza88   User is offline

  • D.I.C Head

Reputation: 24
  • View blog
  • Posts: 114
  • Joined: 13-July 11

Re: need a css master -- how do i center these divs

Posted 11 April 2019 - 02:33 PM

You can use flexbox to center them too

https://codepen.io/anon/pen/EJXVoq
Was This Post Helpful? 1
  • +
  • -

#4 DarenR   User is online

  • D.I.C Lover

Reputation: 624
  • View blog
  • Posts: 4,166
  • Joined: 12-January 10

Re: need a css master -- how do i center these divs

Posted 12 April 2019 - 06:03 AM

View PostMartyr2, on 11 April 2019 - 04:13 PM, said:

I tried to boil down the ideas into two examples. The first one is boiled down from the link you shared... the second is another way to do it where you have a parent wrapper, two elements that are percentage width and uses margin: 0 auto.

https://codepen.io/Martyr2/pen/mgwyGz

Each have their advantages and draw backs. The second one is a little more flexible but uses a few messy percentages, the first one is more solid but less flexible.



i went with your 2nd example but adjusted it to my needs
the 1st example made my items look really really bad ha

thanks for the help

this is for stylizing a program from 2002 that has never been touched and they want it ported to an mobile device...
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1