How to write css when there are multiple classes

[newcoder1010]

Hi,

 

I have the below code from the view source. I have a image field with slide show. I want to center the field using css. I am not sure how.

 

 

<div class="field-slideshow field-slideshow-1 effect-fade timeout-4000 with-pager with-controls" style="width:480px; > height:270px">  <div class="field-slideshow-slide field-slideshow-slide-1 even first">  <img class="field-slideshow-image field-slideshow-image-1" typeof="foaf:Image" > src="http://www.bettylist.com/ac/sites/default/files/styles/large/public/0cda68f4-ae37-470d-8ec1-e080a810948f1334430310.jpg?itok=oTavzRzD" > width="480" height="270" alt="back side" /> <div > class="field-slideshow-caption"> > <span class="field-slideshow-caption-text"><a href="http://www.bettylist.com/ac/sites/default/files/0cda68f4-ae37-470d-8ec1-e080a810948f1334430310.jpg" > class="colorbox" rel="field-slideshow[nid-1272]caption" title="back > side">back side</a></span> > </div> > </div> > <div class="field-slideshow-slide field-slideshow-slide-2 odd" style="display:none;"> > <img class="field-slideshow-image field-slideshow-image-2" typeof="foaf:Image" > src="http://www.bettylist.com/ac/sites/default/files/styles/large/public/1f80f93a-80fc-4c06-b26d-988d19f29e20367217229.jpg?itok=O5N34NS2" > width="480" height="270" alt="driver seat" /> <div > class="field-slideshow-caption"> > <span class="field-slideshow-caption-text"><a href="http://www.bettylist.com/ac/sites/default/files/1f80f93a-80fc-4c06-b26d-988d19f29e20367217229.jpg" > class="colorbox" rel="field-slideshow[nid-1272]caption" title="driver > seat">driver seat</a></span> > </div> > </div> > <div class="field-slideshow-slide field-slideshow-slide-3 even" style="display:none;"> > <img class="field-slideshow-image field-slideshow-image-3" typeof="foaf:Image" > src="http://www.bettylist.com/ac/sites/default/files/styles/large/public/4f29a8f0-f99e-40db-81f7-9ec35de1f5cb-1833362688.jpg?itok=-Vk6N_pV" > width="480" height="270" alt="left side" /> <div > class="field-slideshow-caption"> > <span class="field-slideshow-caption-text"><a href="http://www.bettylist.com/ac/sites/default/files/4f29a8f0-f99e-40db-81f7-9ec35de1f5cb-1833362688.jpg" > class="colorbox" rel="field-slideshow[nid-1272]caption" title="left > side">left side</a></span> > </div> > </div> > <div class="field-slideshow-slide field-slideshow-slide-4 odd" style="display:none;"> > <img class="field-slideshow-image field-slideshow-image-4" typeof="foaf:Image" > src="http://www.bettylist.com/ac/sites/default/files/styles/large/public/39cf741a-79bd-4746-88d6-16987655448e1587974190.jpg?itok=WWnhZOUO" > width="480" height="270" alt="front side" /> <div > class="field-slideshow-caption"> > <span class="field-slideshow-caption-text"><a href="http://www.bettylist.com/ac/sites/default/files/39cf741a-79bd-4746-88d6-16987655448e1587974190.jpg" > class="colorbox" rel="field-slideshow[nid-1272]caption" title="front > side">front side</a></span> > </div> > </div> > <div class="field-slideshow-slide field-slideshow-slide-5 even last" style="display:none;"> > <img class="field-slideshow-image field-slideshow-image-5" typeof="foaf:Image" > src="http://www.bettylist.com/ac/sites/default/files/styles/large/public/ab5b5a9c-2ce1-4590-b926-99d648273cf6-1368514049.jpg?itok=PRgQxJiV" > width="480" height="270" alt="front side" /> <div > class="field-slideshow-caption"> > <span class="field-slideshow-caption-text"><a href="http://www.bettylist.com/ac/sites/default/files/ab5b5a9c-2ce1-4590-b926-99d648273cf6-1368514049.jpg" > class="colorbox" rel="field-slideshow[nid-1272]caption" title="front > side">front side</a></span> > </div> > </div> > </div>

The main container class is

.print-content

Can you please help me writing the css to center the field? Below did not work:

.print-content  .field-slideshow-slide{ margin-left: auto; margin-right: auto; } 

Thanks.

[davej]

This code is filled with errors. First go try...

 

http://validator.w3.org/