stackoverflow com questions 27110158 how to center group of .pdf
Nom original: stackoverflow_com_questions_27110158_how_to_center_group_of.pdfTitre: html - How to center group of divs inside div? - Stack Overflow
Ce document au format PDF 1.5 a été généré par Pdfcrowd - online HTML to PDF API - http://pdfcrowd.com / JagPDF 1.5.0, http://jagpdf.org , et a été envoyé sur fichier-pdf.fr le 18/07/2016 à 02:20, depuis l'adresse IP 89.156.x.x.
La présente page de téléchargement du fichier a été vue 357 fois.
Taille du document: 434 Ko (9 pages).
Confidentialité: fichier public
Aperçu du document
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
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