stackoverflow com questions 27110158 how to center group of .pdf

sign up

log in

Questions

Stack Overflow is a community of 4.7
million programmers, just like you, helping
each other.

tour

Jobs

help

Search Q&A

Tags

Users

Badges

Ask Question

_

Join the Stack Overflow community to:

Join them; it only takes a minute:
Ask programming
questions

Sign up

Answer and help
your peers

Get recognized for your
expertise

How to center group of divs inside div?

0

I am a bit newbie with CSS and i am pretty obfuscated trying to center a group of divs inside a div.
What i want:

open in browser PRO version

asked

viewed 616 times
active

Are you a developer? Try out the HTML to PDF API

1 year ago

3 months ago

pdfcrowd.com

0

active

3 months ago

Get the weekly newsletter! In it, you'll get:
The week's top questions and answers
Important community announcements
Questions that need answers
Sign up for the newsletter
see an example newsletter

Linked
divs 2,3 and 4 should be centered inside div1.

What is clearfix?

My approach:
.div1 {
display: inline-block;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
float:center
}

the result is: the 3 divs (2,3 and 4) one on top of another...

css

Related
2450

Horizontally center a div in a div

260

How to make an image center (vertically &
horizontally) inside a bigger div
1103

How to make div not larger than its contents?

Regards,
html

599

895

css3

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

share improve this question

edited Nov 24 '14 at 17:17

Huangism
9,071

4

How can I transition height: 0; to height: auto; using
CSS?

asked Nov 24 '14 at 17:04

Egidi
19

51

587

8

1265

27

How to disable resizable property of textarea?

Is your layout going to be a fixed/fluid/responsive? – samsos Nov 24 '14 at 17:10
yes, should work for 4K displays, FHD displays, older monitors or even mobile phones – Egidi Nov 24 '14 at
17:12
add a comment

223

Vertically centering a div inside another div

1250

How do CSS triangles work?

3 Answers

active

oldest

votes
886

How to vertically center text with CSS?

Maybe set a width on .div1 and remove inline-block from .div1

1

1

.div1 {
width: 960px;
margin: 0 auto;
text-align: center;
}

How to center floating, multiline divs inside of 100%
width wrapper?

.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
}
share improve this answer

-1

How to center an overflowing image inside of a
constraining div

edited Apr 9 at 21:10

answered Nov 24 '14 at 17:12

Hot Network Questions
Female students coming to office hours in overly
revealing clothing

Ryan

samsos

11

513

6

add a comment

1

7

20

What do you call the additional money you pay
when you buy a store or restaurant in return for
many cutomers and nice facilities?
How can I get Firefox to prefer HTTPS over HTTP?

This can easily be done with table display:

Chasing someone who has fallen into a black
hole
What's the most reasonable way to fit Monsters in
your Pocket?

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

your Pocket?

1

Can the second derivative of a function be
interpreted as the slope of its "concavity lines"?

.table-display {
display: table;
width: 100%;
}
.cell-display {
display: table-cell;
}
.div1, .div2, .div3, .div4 {
padding: 40px;
}
.div1 {
background: #ABC;
}
.div2 {
background: #DEF;
}
.div3 {
background: #CAD;
}
.div4 {
background: #FAD;
}

Dealing with expensive office traditions
Would I ever need credit card if my debit card is
issued by Master/Visa?
Why the shapefile of worldwide country
boundaries is so large (>500 MB)?
How to manage a person who identifies as bigender?
What does it mean? "I can't people today"
Why chmod 777 -R / crashes the system?
Why does chess.com's tactics player avoid taking
the queen in this problem?
Why can't spaceships just accelerate to create
gravity?
What is a word for making something seem not
as bad as it actually is?
Apollo/Shuttle launch site fuel handling

<div class="div1">
<div class="table-display">
<div class="cell-display div2"></div>
<div class="cell-display">
<div class="div3"></div>
<div class="div4"></div>
</div>
</div>
</div>

How to insert tabs before output lines from a
executed command
Strategy to make extraterrestrials fear us
Is it allowed to take an external hard drive with
you on a plane?
Why is "Pokémon" written with an accent?
What if everyone on a flight checks in extra
baggage by paying?

Run code snippet

Is it appropriate to make a pun that references a
highly charged topic in current events, in a lecture
on an unrelated subject?

share improve this answer

edited Nov 24 '14 at 17:36

answered Nov 24 '14 at 17:21

Berkeley problem 1.1.28

Salman A
117k

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

39

How can I make a lists of pairs out of two lists of
triples?

249

335

pdfcrowd.com

Apparently someone did not like the color scheme. – Salman A Nov 25 '14 at 11:58
add a comment

0

The most common way to center a block element if you know it's width is to define the width and use
"margin: 0 auto". This tells the browser to give a top and bottom margin of 0, and to automatically
determine equal margins on the left and right.
Using floats, you can create the layout you described as follows:
http://jsfiddle.net/ynt4suee/
Markup:
<div>
<div id="one" class="border clearfix">one
<div id="wrapper">
<div id="two" class="border">two</div>
<div class="subcontainer">
<div id="three" class="border">three</div>
<div id="four" class="border">four</div>
</div>
</div>
</div>

CSS:
div.border{
border: 1px solid red;
}
div#wrapper{
width: 400px;
margin: 0 auto;
}
div#two{
width: 250px;
float: left;
}
div.subcontainer{
float: right;
width: 130px;

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}

Here's another approach, using inline-block elements for the inner divs instead:
http://jsfiddle.net/xojqq4v5/
Markup:
<div id="one" class="border">
div 1
<div id="wrapper">
<div id="two" class="border">div 2</div>
<div id="subcontainer">
<div id="three" class="border">div 3</div>
<div id="four" class="border">div 4</div>
</div>
</div>
</div>

CSS: div.border{ border: 1px solid red; margin-bottom: 5px; }
div#wrapper{
width: 450px;
margin: 0 auto;
}
div#two, div#subcontainer{
display: inline-block;
vertical-align: top;
}
div#two{
width: 300px;
}
div#three, div#four{
width: 140px;
}

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Still, so long as you know the total width of the inner divs, you can center the wrapper using "margin: 0
auto", which has the advantage of not centering text on all child elements unless otherwise specified.
The difference here is that to lay out the inner divs in columns, div 2 and the container div containing
divs 3 and 4 are defined as inline-block elements.
share improve this answer

edited Nov 24 '14 at 17:56

answered Nov 24 '14 at 17:31

A Steinmetz
56

5

Since it's a multi-columnar layout, you'll want to create a wrapper for the divs that you want to center, and
another container div for the divs you want to appear on the right. With floated elements you'll want to use a
clear-fix. More on that here: stackoverflow.com/questions/8554043/what-is-clearfix – A Steinmetz Nov 24 '14
at 17:34
add a comment

Your Answer

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Sign up or log in

Post as a guest

Sign up using Google

Name

Sign up using Facebook

Email
required, but never shown

Sign up using Email and Password

Post Your Answer
By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged

html

css

css3

or ask your own

question.
question feed

about us

tour

help

blog

chat

data

legal

privacy policy

work here

TECHNOLOGY
Stack Overflow

Programmers

Server Fault

Unix & Linux

Super User
Web Applications
Ask Ubuntu

Ask Different (Apple)
WordPress
Development

Webmasters

Geographic Information
Systems

Game Development

Electrical Engineering

open in browser PRO version

Database
Administrators

advertising info

mobile

contact us feedback

LIFE / ARTS

CULTURE / RECREATION

SCIENCE

OTHER

Photography

English Language &
Usage

Mathematics

Stack Apps

Cross Validated (stats)

Meta Stack Exchange
Area 51

Drupal Answers

Science Fiction &
Fantasy

SharePoint

Graphic Design

Mi Yodeya (Judaism)

Theoretical Computer
Science

User Experience

Movies & TV

Travel

Physics

Mathematica

Seasoned Advice
(cooking)

Christianity

MathOverflow

Arqade (gaming)

Chemistry

Bicycles

Biology

Salesforce
ExpressionEngine®

Home Improvement

Are you a developer? Try out the HTML to PDF API

Skeptics

Stack Overflow Careers

pdfcrowd.com

TeX - LaTeX

Android Enthusiasts

ExpressionEngine®
Answers

Information Security

more (13)

Bicycles

Biology

Personal Finance &
Money

Role-playing Games

more (5)

Academia

more (21)

more (9)

site design / logo © 2016 Stack Exchange Inc; user contributions licensed under cc by-sa 3.0 w ith attribution required
rev 2016.7.17.3767

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com