css - display CENTERED row of images -
I have a line of three images that are currently looking just right.
Now, I want to display two more images right below those three and I want them to focus (this looks slightly upwards on the pyramid).
No matter what I do, coalition is left in the lower line.
Here is the CSS
. Category {width: 176px; Font-size: 80%; Text-align: center; Swim left; Status: Relative; } Here is the html:
& lt; Div style = 'width: 95%; Alignment: Center '& gt; & Lt; Div class = 'range' & gt; & Lt; A href = 'individual.php' & gt; & Lt; Img src = 'picture / personal Jpg 'style = "padding-bottom: 0.0em;" Range = '0' alt = 'Personal electronic neighborhood watch alert by email and text messaging' & gt; & Lt; / A & gt; & Lt; P & gt; Individuals & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = 'range' & gt; & Lt; A href = 'community.php' & gt; & Lt; Img src = 'picture / community. Jpg 'style = "padding-bottom: 0.0em;" Limit = '0' alt = 'Community based electronic neighborhood watch alert via email and text messaging' & gt; & Lt; / A & gt; & Lt; P & gt; Community & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = 'range' & gt; & Lt; A href = '/ police' & gt; & Lt; Img src = 'image / first_content Jpg 'style = "padding-bottom: 0.0em;" Limit = '0' alt = 'Send police and electronic neighborhood watch alerts via email and text messaging' & gt; & Lt; / A & gt; & Lt; P & gt; Fire / Police & lt; / B & gt; & Lt; / Div & gt; & Lt; Br> & Lt; Div class = 'range' & gt; & Lt; A href = 'business.php' & gt; & Lt; Img src = 'images / business.jpg' border = '0' alt = 'Electronic Crime Clock Alert by Email and Text Message to Business & gt; & Lt; / A & gt; & Lt; P & gt; Business & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = 'range' & gt; & Lt; A href = 'utility.php' & gt; & Lt; Img src = 'images / utility.jpg' range = '0' alt = 'phone, cable, water, gas and power outage alerts' & gt; & Lt; / A & gt; & Lt; P & gt; Utilities & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; Here you can see the original three:
Because I should not show the search page in the search page because you can take the above URL And add index 2. See the .php and all 5 images on it.
Any suggestions would be appreciated!
If you set your code divs to display: inline-block , those containers Will follow the rule of text-align: center . Markup Example
& lt; Div class = "container" & gt; & Lt; Div class = "range" & gt; & Lt; / Div & gt; & Lt; Div class = "range" & gt; & Lt; / Div & gt; & Lt; Div class = "range" & gt; & Lt; / Div & gt; & Lt; Br / & gt; & Lt; Div class = "range" & gt; & Lt; / Div & gt; & Lt; Div class = "range" & gt; & Lt; / Div & gt; & Lt; / Div & gt; css
. Container {boundary: 1 px solid # ccc; Text align: center; } .category {display: inline-block; Width: 100px; Height: 100 pixels; Background: #ccc; Margin: 5 px; }
Comments
Post a Comment