UL vertical alignment problem

[Gustavo]

Gustavo

February 4, 2015 at 9:29 am

Hello Ben,

Many thanks in advanced for your support! As per your suggestion, I am creating a new post for my issue. I have an ourdered list within a widget that I need to align vertically. Yes, I added a top-padding to a class I created for the widget as you suggested, but is not really a solution, because it’s not a responsive solution. As soon as I view the site on a mobile device, there is always a white space (created by the padding) which should not be there. The idea is to have the text (paragraph, list, etc) centered vertically, regardless of the height of the widget and responsive, but if is easier for you lets say the height of the widget is 250px. I found the following solution on line and it does work, but since it is a SECTION on the widget with specific attributes, that CSS affects all sections within the site (e.g. top bar) and if I change SECTION in the widget to ARTICLE then affects the blog ARTICLES, and if I use a div with a class that has the attributes of the SECTION then it does not work, Please Help! I am stocked on this and I need to advance, plus whatever solution there is I will apply it in other pages. Here is the link *Login to see link
CSS:
.text ul {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

.block-of-text ul {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

section {
display: block;
max-width: 500px;
background: #433669;
margin: 0 auto 1em;
height: 250px;
border-radius: .5em;
color: white;
img, p {
padding: 1em;
}
}

Then on the widget, this is the list:
<section class=”block-of-text”>

Over 30 years experience
Passion to provide exactly what you want
Expert knowledge
High quality kitchen cabinets
Partnered with professionals
On-time and within budget
Fine attention to detail

</section>