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/
Related
Why when I specify a width property in my p element, the text doesn't flow around the div element ?
I know one the solution to this is to have float: left; in my p element too. Just looking for explanation, not finding for solution
div {
width: 200px;
height: 100px;
background-color: green;
opacity: 0.2;
float: left;
}
p {
background-color: yellow;
width:10px;
}
<div></div>
<p>Lorem Ipsum</p>
Block elements don't wrap around floats, their contained line boxes do. But since the width of the p element is less than that of the div element, there's no space for the line boxes of the p element to go beside the div element, so the first opportunity for the line box to be placed is below the div element. So wrapping around is exactly what the line box of the p element is doing.
It's probably a display issue.
You can try to set a display:inline-block to your <p> tag.
But I think to put one aside another you can better use flex-box:
Wrap your two or more elements inside a div or a section, and give this div a property display: flex.
By default, it will align those elements horizontally, and the property align-items: center is to align those elements based on the div's center.
<div id="container">
<div>One</div>
<p>Another</p>
</div>
<style>
#container {
display: flex;
align-items: center;
}
#container div {
/* ... Your previous div style */
margin-right: 15px;
}
</style>
I'm having an issue with css trying to get the text of one div to be floated left on another div with the text displayed as in the screen shot. I cannot simply move the text because of a complex wordpress theme issue.
I've tried making the top div display:inline; and flex. Then floating the bottom div left and combinations of this for several hours, this leads to my question below.
Is it even possible to display a div like this?
Note that the "content here" text needs to be floated left on the "more text".
Here is a screenshot of how I want the layout:
Settings both divs to display: inline; should be all it takes. You don't need floats or flex-layouts. (See the snippet below).
I highly recommend studying the CSS Box Model in greater depth:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
.wrapper {
width: 150px;
}
.more-text,
.content-text {
display: inline;
}
.more-text {
background: green;
}
.content-text {
background: red;
color: #fff;
}
<div class="wrapper">
<div class="more-text">
Random text here More text
</div>
<div class="content-text">
content text Random text here
</div>
</div>
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>
I have three links. I want to align them like one in the left, one in the middle and one in the right in a single line.
Say my links are prev(which I want place in the left of the line) home(which I want place in the middle of the line) and next(which I want place in the right of the line). So I wrote this code:
prev
lots of
home
lots of
next`
I understood this is wrong because its a fixed size and will cause problem if I resize my window or in a relatively small screen. So I tried this:
prev
home
next
But it didn't work!
So how can I solve this problem with HTML?
`
Wrap links with a div container and use left/right floats and text-align: center on the wrapper:
.wrap {
text-align: center;
background: #EEE;
padding: 10px;
}
.wrap .left {
float: left;
}
.wrap .right {
float: right;
}
<div class="wrap">
prev
home
next
</div>
In CSS, how can I center text around a specific word?
For instance, let's say I have the following DIV:
<div style="text-align: center;">
Previous Day | Navigation | Next Day
</div>
The text will technically be centered, but the word "Navigation" will NOT be in the exact middle. Rather, the middle will be exactly between the letters "v" and "i". This is because when centering text, the length of the entire string is taken into account.
How can I make the middle instead be between the "g" and the "a", using (preferably) only CSS? Modifying the HTML is also acceptable. As a last resort, I'm willing to use JavaScript, although only if it's kept simple, otherwise it's not worth it to use complex JavaScript for such a simple task.
Fixing the width of the elements containing "Previous Day" and "Next Day" is probably the simplest solution:
<div style="text-align: center;">
<div style="display: inline-block; width: 12em; text-align: right;">Previous Day</div>
<div style="display: inline-block;"> | Navigation | </div>
<div style="display: inline-block; width: 12em; text-align: left;">Next Day</div>
</div>
Fiddle here.
You can wrap your individual items in an HTML tag, like an anchor, and float them to achieve your desired result. Floating the tags places them side-by-side, and giving each item a percentage-width that collectively adds to 100% effectively centers the elements in their container.
Note, there are some pitfalls to using floats. You need to clear the parent div to properly lay out elements following a container with floated children. Also, if the child elements have any padding, this will be added to the percentage width and misalign the children unless you use box-sizing: border-box; on the child elements.
HTML
<div class="container">
Previous Day
<span class="separator">|</span>
Navigation
<span class="separator">|</span>
Next Day
</div>
CSS
.container {
color: white;
margin: 0 auto;
width: 80%;
min-width: 320px;
background-color: black;
overflow: hidden; /* to clear the div */
}
.container a {
text-align: center;
float: left;
width: 32%;
overflow: hidden;
background-color: orange;
}
.container .separator {
float: left;
text-align: center;
padding: .5%;
}
The colors are to show that it is centered in its parent element.
Here's a live demo jsFiddle