I'm developing a bootstrap style website and I have text that needs centering. I've centered it in the horizontal dimension by using center align but I dont know how to center it vertically in the row.
<div class="col-md-6">
<p align="center">Some Text that needs centering.</p>
</div>
The 'align="center"' takes care of the horizontal alignment but I dont know how to put the text in the absolute center of the row.
With bootstrap you have text alignment helper classes:
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
http://getbootstrap.com/css/#type-emphasis
(you need to scroll down a little)
you can also set an element to display: block and center via margin.
<div class="center-block">...</div>
paragraph tags should automatically be block level elements
Hope this will work.
<div class="col-md-6">
<p style="display:inline-block; vertical-align:middle">Some Text that needs centering.</p>
</div>
Here's an example that should help it retains the bootstrap class. You can also view it in this demo.
HTML
<div class="cont .col-md-6">
<h1>Some text</h1>
</div>
CSS
.cont {
border: 1px solid #333;
width: 400px;
background: #eee;
}
Related
I have 2 <p> tags. How can I let the 2nd <p> tag overflow but not overlap the 1st <p> tag.
Below is an example of what I a want to do
<p>Heading</p> - <p>Text text text text text text text text
text text</p>
On the contrary to SteffPoint. You should never use html tables for the structure of your web page. What I would suggest you to do is to place both your paragraphs each in its own div so they have their own block and then float them left next to each other. For this, the most important thing is the width of the block. Make sure the width of the div is small enough so that when you float, the bottom div slides up. I usually use the "%" sign so it adapts to the size of the window.
/* CSS */
/* This border is simply to see the block you have around each paragraph */
.Block {
border: 1px solid black;
padding: 2px;
margin: 2px;
width: 40%;
}
.adjacentBlock {
float: left;
}
<html>
<head>
<link rel="stylesheet" href="help.css">
</head>
<body>
<div class="Block adjacentBlock">
<p>This is your first paragraph inside the div</p>
</div>
<div class="Block adjacentBlock">
<p>This is your second paragraph inside the div</p>
</div>
</body>
</html>
I have created an HTML framework to display a top banner containing an image a centered title and a clock, below it, there is a stage area to display some graphs and images.
The problem I am encountering is that when I increase the font size of the title in the banner, I am left with some white space above, and with increasing the font size, the text disappears (I have set the containing div to hide the overflow). Ideally, this spacing could be reduced with some property.
I tried searching for aligning the text to the top, but unfortunately I just cannot find it! The behaviour is present even when the text and its div are the only things in the document.
Link to the jsFiddle with the whole page here
Link to the isolated div here
Is there a property I am missing, or another trick to move the text upwards?
<div id="banner" style="width:100vw;height:10vh;overflow:hidden">
<div id="bannerLeft" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:red">
img
</div>
<div id="bannerMiddle" style="width:70vw;height:100%;overflow:hidden;float:left;background-color:blue">
<p style="text-align:center;font-size: 2.5em;">Staged Title</p>
</div>
<div id="bannerRight" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:green">
<p id="timeNow" style="font-size: 2.5em;text-align:center">
10:00
</p>
</div>
</div>
<div id="stage" style="width:100vw;height:85vh;overflow: hidden;background-color:yellow">
Stage is managed with JS
</div>
The problem is the <p> tag inside the div. You realy don't need it here. Remove it, and add the styling to the div element:
Staged Title
Demo:
.bannerMiddle {
width: 70vw;
height: 10vh;
overflow: hidden;
float: left;
background-color: blue;
text-align: center;
font-size: 2em;
}
<div class="bannerMiddle">
Staged Title
</div>
<br style="clear: left"><br>
<div class="bannerMiddle">
<p>Staged Title (BAD)</p>
</div>
I'd like to align horizontally an image and paragraph of text next to each other within my main div element of my web page.
The divs are wrapped like this:
<div id="main">
<div id="image">
</div>
<div id="paragraph">
</div>
</div>
Is this the right layout? If so, what CSS do I need?
You need to set both of the inner divs to
display: inline-block;
Check out this fiddle. https://jsfiddle.net/m8athtLp/light/
You can do using two way:
Firstly, From your markup, You can use css to float: left image and float: right paragraph.
Secondly,
<pre><div id="main">
<img src="images/img.jpg" alt="">
<p>your text</p>
</div></pre>
For this this code you can use float: left for image, paragraph text auto align right
Thanks
My problem is this. I have container and inside him i have 2 more containers one of the containers i use to put image and other container i use to put header and paragraphs. I want to make something like short preview of a news and i will have multiple copies of this containers with different images and different headers and paragraph and i don't want to always adjust the height of the parent container i want to automatically adjust his height. Can i do that with CSS and how ?
Here is example code
<!-- First div is Bootstrap jumbotron -->
<div class="jumbotron">
<div class="boxForNews">
<div class="boxForImage">
<img src=" ">
</div>
<div class="boxForContent">
<h3>Some Heading</h3>
<p>Random text Random text Random text Random text</p>
</div>
</div>
</div>
Here is CSS
.boxForImage{
width:33%;
float:left;
}
.boxForContent{
width:66%;
float:left;
}
The containers inside boxForNews are growing accordingly to the elements i put inside them but their parent do not grow accordingly to the grow of the 2 containers and my jumbotron gets broken because of this.
I Could give the first container some height but i the content i put inside the 2 containers inside him will always change and i will have to always play and change the height for every news i add.
First the errors in the code; You are missing an end quoation mark for the class attribute boxForImage, and the style rule .boxForImage ends with { instead of }.
The floating elements in the boxForNews div won't affect the height of their parent. You can make it contain its children by changing the overflow style:
.boxForImage{
width:33%;
float:left;
}
.boxForContent{
width:66%;
float:left;
}
.boxForNews {
overflow: hidden;
background: #eee;
}
<!-- First div is Bootstrap jumbotron -->
<div class="jumbotron">
<div class="boxForNews">
<div class="boxForImage">
<img src="http://placehold.it/100x100">
</div>
<div class="boxForContent">
<h3>Some Heading</h3>
<p>Random text Random text Random text Random text</p>
</div>
</div>
</div>
Not really sure how to properly title this. It is best explained with images.
I am trying to keep the items centered, but when there is too many to fit properly on one line, the new line should be aligned with the item above it, not centered within the container.
I am trying to achieve this:
Instead of this:
Here is my JSfiddle:
http://jsfiddle.net/6kwzy6La/
And my HTML:
<div class="container2">
<div class="content">
<div id="box">
<p> Some text goes here </p>
</div>
<div id="box">
<p> Some text goes here </p>
</div>
<div id="box">
<p> Some text goes here </p>
</div>
<div id="box">
<p> Some text goes here </p>
</div>
<div id="box">
<p> Some text goes here </p>
</div>
</div>
</div>
http://jsfiddle.net/6kwzy6La/
Container1
{
text-align: center;
}
Container2
{
text-align: left;
}
One approach is to add an appropriate right margin to the last box if there are a odd number of boxes, like this
#box:last-child:nth-child(2n + 1) {
margin-right:240px;
}
See http://jsfiddle.net/6kwzy6La/6/
Note that you should be using class not id as ids should be unique within the document.