CODEWITHSUNDEEP
cssmedia-queriesresponsive-design
Lieutenant Dan
Lieutenant Dan

Reputation: 8264

centering all Imgs on Responsive Design

I'm wondering if there's a good, generic, simple way, to code/ state all images to be centered horizontally within a responsive design below a certain viewport.

Eg, below 480px width viewport, all images display as block and are centered on the screen.

Upvotes: 1

Views: 1760

Answers (2)

copenndthagen
copenndthagen

Reputation: 50722

You'll need to use a combination of CSS Media Queries and the actual CSS...

e.g. You can have 2 separate CSS files and call the relevant one based on device features

<link href="small.css" media="only screen and (max-width:480px)" />
<link href="big.css" media="only screen and (min-width:480px)" />

Then define the actual CSS inside small.css/big.css

e.g. in small.css, define the following style

img {margin:o auto;text-align:center}

and no need to define anything in big.css (default gets applied)

Upvotes: 2

zearth
zearth

Reputation: 151

I'm not sure if it works, but try 

img { margin:o auto; text-align:center}

but some part will work, but I'm not totally sure if will work all way around due some DIVs might have not inherit the width and will not align all images to center.

Upvotes: 0

Related Questions