I have my main content div, and I want to create a title that is centered in this parent div, and then have a subtitle underneath that is right-aligned to the edge of the centered text. I've been having a real difficult time getting this to work, and all the examples I can find on this site and others seem to get messed up when the top text is centered (as opposed to, say, left-aligned to the parent div).
It should look like this (where App Title is centered in a larger div):
The closest I can find is this question (Right-align two divs) but it seems that float: left is very important to making this work, which doesn't seem to work for my case. Other solutions seem to involve display: table but I was struggling to get the effect I want.
The title div needs to be variable width and I don't need to support ancient browsers. Thanks for any help!
Here are 2 ways, one using flex and the other using inline-block. Basically create a container for the titles, center that container, then align the subtitle to the right.
* {margin:0;}
h1 {
font-size: 3em;
}
.flex {
display: flex;
justify-content: center;
}
.flex h2 {
text-align: right;
}
.ib {
text-align: center;
}
.ib header {
display: inline-block;
}
.ib h2 {
text-align: right;
}
<section class="flex">
<header>
<h1>app title</h1>
<h2>subtitle</h2>
</header>
</section>
<section class="ib">
<header>
<h1>app title</h1>
<h2>subtitle</h2>
</header>
</section>
Related
h1, p {
font-family: futura; sans-serif;
margin: 20px 20px 0px 20px;
}
.section {
background-color: tomato;
padding: 50px;
margin: 0 auto;
}
.container {
background-color: white;
padding: 5px;
margin: 10px 20px;
text-align: center;
display: inline-block;
height: 250px;
}
<div class="section">
<div class="container">
<h1>This is a title</h1>
<p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
<div class="container">
<h1>This is another title</h1>
<p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
<div class="container">
<h1>This is a third title</h1>
<p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
</div>
I am trying to improve my ability to organize content with CSS. It's something I'm really struggling with and I've read a lot of different articles and watched all the videos but it's not clicking just yet. I would like to understand how to do so in a way that incorporates responsive design ideals in addition to not relying on flex box. Flexbox is the next step but I want to master this stage first.
I practiced adding styles to a simple three-card section of content. I was able to get to the point where I have the boxes lined up horizontally. Now there are a couple of issues.
The cards won't align on the same row unless I give a max width, which I'm not sure is best practice for responsive design.
The .container content won't center within the .section class. I've done 'margin: 0 auto;' but it won't affect it.
I've tried adding a relative position property to the .container class as well but that didn't seem to matter.
When I size the viewport to mobile view, the text spills over the bottom of the white container. How do I get the height of the container to adjust to the content within?
Try to use css flex features. Example:
h1, p {
font-family: futura; sans-serif;
margin: 20px 20px 0px 20px;
}
.section {
background-color: tomato;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container {
width:80%;
background-color: white;
text-align: center;
padding: 5px;
margin: 10px 20px;
}
<div class="section">
<div class="container">
<h1>This is a title</h1>
<p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
<div class="container">
<h1>This is another title</h1>
<p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
<div class="container">
<h1>This is a third title</h1>
<p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
</div>
Your query states that you want to learn style techniques prior to Flexbox, so I dug up an antique prototype that I built in 2011 following this tutorial by Christopher Schmitt http://christopher.org/css-floats-to-display-columns-in-any-order/, and I posted it as a Pen for you to see.
https://codepen.io/cwebba1/pen/agxMzQ
<div><p>Check it out Here</p></div>
I also put it here.
Christopher Schmitt's original tutorial is still up and he has a link to a book that he wrote. You can see from his tutorial that he uses floats, inline-blocks, and percentage widths for layout, and negative margins to control the order of content display on the page. I am in the midst of redesigning my webpage and I still use this pattern.
Also, when I first started learning CSS I found a small inexpensive book, CSS in Easy Steps. It will lead you through the Cascade and styling elements quickly.
As to your projet, I recomend using persentages to set widths, and then changing percentages and adding inline-block to wider media-query layouts.
I am creating a vertical website that has several different sections.
I want to make each section responsive to the content it has, but it seems like it's not responsive right now. Those two texts on the first row below the navbar is supposed to be in two different lines because it is written like:
<div id="firstRow">
<a id="about" class="smooth"></a>
<div class="intro">
<div>Welcome to my website</div>
<div>Scroll down to know more about us</div>
</div>
</div>
and I tried to use flex to make the first div responsive
div#firstRow {
padding: 100px;
display: flex;
}
How can I make this work?
I think you should put the display: flex property to your .intro div and also add a flex-direction of row to put it on the same line:
.intro {
display: flex;
flex-direction: row;
}
Example on jsFiddle.
do it something like this
.intro > div {
float:left;
clear: both;
display:block;
}
From all my searches I seem to be using the right technique but the centering just isn't happening.
This is the code block from my .html file:
<div id="section-movement" class="section-container">
<div class="section-title">
Movement <span class="center">*click entries for more details*</span><span class="float-right">limited by movement speed</span>
</div>
</div>
This is the entries in my .css file:
.center {
text-align: center;
}
.float-right {
float: right;
}
The output should be the word 'movement' left aligned, the text 'click entries for more details', should be centered and the text 'limited by movement speed' should be right aligned. The left and right text work fine but the 'click entries for more details' text is not centering, it just immediately follows the 'movement' text.
span is an inline element by default. The way you use centering is inside a span element, which doesn't do anything since it's inline.
You can use <div>s instead of <span>s, which are block elements (default width: 100%), but I don't know if this is what you imagine - in your current code you are trying to center some words which basically are part of a text paragraph...
It seems you want to distribute three parts of a sentence left, middle and right. You can put all three parts into DIVs or SPANs (in this particular case it won't matter since they all become flex items by the flex definition of their container) and add this rule for their parent element:
.section-title {
display: flex;
justify-content: space-between;
}
Here's the complete code:
.section-title {
display: flex;
justify-content: space-between;
}
<div id="section-movement" class="section-container">
<div class="section-title">
<span>Movement</span><span>*click entries for more details*</span><span>limited by movement speed</span>
</div>
</div>
I'm pretty sure you can just use the center tag...?
So it would be:
<'center>
...Content you want centered...
<'/center>
But without the apostrophe's.
Try something like this.
I made a minor update to your HTML and put the word "Movement" in a span that I floated left. I floated the span with a class of right to the right and added text-align: center to the div with a class of section-title that centered the span with a class of center.
Note that you don't need a text-align: center rule on the div with a class of center.
.section-title {
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
https://jsfiddle.net/eulloa/k7LL0byt/1/
Looking to have an image (logo) on the left side of a div with text (a title) centered on the div. A basic question, but some caveats.
If I use position: absolute on the image, the text is centered, but when I resize the window the image covers the text. Want this to be a responsive page where the text is centered until it hits the image and the won't overlap. https://jsfiddle.net/mwqwmkdm/
If I use float: left on the image, then the text is not really perfectly centered. https://jsfiddle.net/mwqwmkdm/1/
I could create a margin-right of equal size on the other side of the text, but then I'm wasting those pixels on smaller displays and I don't want to do that. Eventually, it will be more than that one line I am centering. https://jsfiddle.net/mwqwmkdm/2/
Basically, I want:
the text centered as long as the screen is wide enough
the text to wrap around the image and not be in front of or behind it when the screen isn't wide enough
not to lose any screen space except for the image itself
Thanks
If you're willing to try an alternative to CSS float and positioning properties you can easily accomplish your task with CSS Flexbox. Code is clean, simple, efficient and easy to maintain. Also, flexbox is now supported by all major browsers.
DEMO
HTML
<div id="container">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<p>centered text</p>
</div>
CSS
#container {
display: flex;
border: 2px solid black;
background-color: aqua;
}
img {
margin: 10px;
}
p {
border: 1px dashed red;
padding: 5px;
flex-grow: 1;
text-align: center;
}
UPDATE
Here's one way to keep your text centered on the full width of the container, while not allowing the text and image to overlap on smaller screens. No flexbox, no deprecated tags. Just a very simple media query.
Wide screen
Narrow Screen
DEMO
Flex box has compability problems with some browser. Just Create BFC for the <center></center> using overflow:hidden;
Check this out! jsfiddle
You can use flexbox like this:
.wrapper{
display: flex;
}
.content{
flex-grow: 1;
text-align: center;
}
<div class="wrapper">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
Centered Text
</div>
</div>
Check this out for more info https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background
Edit:
To center it respect to the container you can use a modification of you second example using float: left but instead to set the margin to the center you would put the text in a span and set the margin-right to it like this:
img {
float: left;
}
.content {
text-align: center;
}
.content span{
margin-right: 100px;
}
<div>
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
<span>Centered Text</span>
</div>
</div>
Yes, obviously I'm doing it wrong. Why can't it be as easy as horizontally aligning stuff? I sit and my work is halted for hours on end trying to look up how to vertically align in the middle, so I don't have to bug you guys with my stupid most-likely really easy to you question.
Display Block or Table-Cell, everything I read never works. I thought "maybe if I horizontally align my img with .divID img and then vertically align the div itself" sadly, I wish that'd work. But even when I did try centering the div vertically in the middle, it messed up the image centering and didn't even work.
TL;DR: I hate trying to vertically align stuff so much.
I'm trying to get my header image centered vertically and horizontally. This my code I'm working off.
HTML
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="http://i.imgur.com/d0umnxt.png" />
</div>
</div>
</div>
CSS
body {
margin: 0px;
}
#header {
width: 100%;
height: 100px;
background-color: #151B1F;
}
#logo {
display: block;
margin: auto;
}
I hate table and table-cell just as much as the next guy, but when you know the height of the parent element (#header in your case), things become really easy.
Here's a working fiddle.
You just need to add the following styles to your CSS:
#header {
display: table;
}
#logo {
display: table-cell;
vertical-align: middle;
text-align: center;
}