0

I have a simple <dl> element with some child <dt> and <dd> tags. In the Fiddle you'll see the normal layout, but for mobile I'm trying to make the elements look like they have text-align: center on them. They should display 2-a-side but overall it should look centered.

I've tried setting the child elements to display: inline-block with text-align: center on the parent, but I don't know a way of "pushing" the first of each pair onto a new line. Hopefully I've explained this well enough...

Please take a look at the Fiddle and make any suggestions, Thanks.

https://jsfiddle.net/4ptdLg92/

Daniel Williams
  • 8,912
  • 15
  • 68
  • 107
Dan
  • 550
  • 4
  • 10
  • 21

3 Answers3

2

I removed all floating and added

.data_table dd:after {
  content: '';
  display: block;
}

Now you can set text-align: center in @media section:

body {
    text-align: center;
}
.data_table {
    display: inline-block;
    overflow: hidden;
    text-align: left;
    background: #efefef;
    padding: 10px;
    width: 300px;
}
.data_table dt, .data_table dd {
    margin: 0;
    margin-bottom: 2px;
    display: inline;
}
.data_table dt {
    padding-right: 8px;
}
.data_table dd:after {
    content: '';
    display: block;
}
@media (max-width: 600px){
    .data_table {
        text-align: center;
    }
}
<dl class="data_table">
    <dt>One:</dt>
    <dd>Value 1</dd>
    <dt>Two:</dt>
    <dd>Value 2</dd>
    <dt>Three:</dt>
    <dd>Value 3</dd>
    <dt>Four:</dt>
    <dd>Value 4</dd>
</dl>

or https://jsfiddle.net/4ptdLg92/2/

Cheslab
  • 1,896
  • 2
  • 17
  • 27
  • To see the effect open snippet in a fullscreen mode and change browser's window size – Cheslab Aug 18 '15 at 15:49
  • Beautiful, thank you. I messed around with :before and :after and couldn't get what I was after. Thanks for taking the time to answer my question. – Dan Aug 18 '15 at 16:07
1

It's not entirely clear what you are after but I think this is the look you were going for:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  text-align: center;
}
.data_table {
  display: inline-block;
  overflow: hidden;
  text-align: left;
  background: #efefef;
  padding: 10px;
  width: 300px;
}
.data_table dt,
.data_table dd {
  margin-bottom: 2px;
  float: left;
  width: 50%;
}
.data_table dt {
  clear: both;
  text-align: right;
}
<dl class="data_table">
  <dt>One:</dt>
  <dd>Value 1</dd>
  <dt>Two:</dt>
  <dd>Value 2</dd>
  <dt>Three:</dt>
  <dd>Value 3</dd>
  <dt>Four:</dt>
  <dd>Value 4</dd>
</dl>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Thanks for taking the time to write, "Cheslab" got there just before you published but I appreciate the code. – Dan Aug 18 '15 at 16:15
0

it might be worth checking this out first:

https://stackoverflow.com/a/10998064/4351155

in case this is not possible a possible fix could be:

dt{
    text-align:right;
}
dd{
    text-align:left;
}
dt, dd{
     background:red;
     float:left;
     display:inline-block;
     width:50%;
}

example here: https://jsfiddle.net/4ptdLg92/

Community
  • 1
  • 1
MegaDamned
  • 31
  • 2