This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 3 years ago.
I have 3 images on my home page,I need text in top of each images,so how to add text over image
<div class="container">
<h2 class="section-title">
My clasess
</h2>
<div class="owl-carousel visit-carousel">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
have the text inside of a div, and use the div as your image using css. background-image option, and inside the div insert your text.
Html
<div class="image-box">
<h2>Text Inside</h2>
</div>
css
.image-box {
background-color: #ccc;
height: 200px;
width: 200px;
}
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed last year.
I am trying to align a span vertically centered. But its not working.
Here is my code:
<div style="height:150px; width:100%;">
<div style="height:150px;width:150px;;background-color:blue;display: inline-block;">
<!-- <div class="text-center" style="float:center;">-->
<img style="width:100%;float:left;height:100%;" t-att-src="'data:image/png;base64,%s' % to_text(o.company_id.header_image)" />
<!-- </div>-->
</div>
<div style="height:150px;width:400px;float:right;background-color:red;display: inline-block;">
<!-- <div class="text-center" style="float:center;">-->
<span style="font-size:40px;vertical-align:middle;padding-top:70% !important;padding-left:16%;"><b>Purchase Order</b></span>
<!-- </div>-->
</div>
</div>
Actually, i am converting above code to pdf instead html rendering using wkhtmltopdf.
Use display:flex;, align-items:center; on parent div and display:inline-block; on span element to make it an actual block element.
<div style="height:150px; width:100%;">
<div style="height:150px;width:150px;;background-color:blue;display: inline-block;">
<img style="width:100%;float:left;height:100%;" t-att-src="'data:image/png;base64,%s' % to_text(o.company_id.header_image)" />
</div>
<div style="height:150px;width:400px;float:right;background-color:red;display: flex;align-items:center;">
<span style="display:inline-block;font-size:40px;vertical-align:middle;padding-left:16%;"><b>Purchase Order</b></span>
</div>
</div>
This question already has answers here:
CSS: align two element, to the left and right in the same line WHITHOUT floats
(3 answers)
Closed 1 year ago.
I'm trying to achieve the following:
But maintaining a specific div structure/hierarchy/order:
<div>
<div>
<h3>TITLE</h3>
<p>LEGEND</p>
</div>
<div>
<i>BUTTON</i>
</div>
</div>
Tried with position relative float right and display inline, but to no success.
Here are the attempts:
https://jsfiddle.net/xzmf8753/
<div style="background-color: red; position: relative">
<div style="position: relative; display: inline;">
<h3>TITLE</h3>
<p style="display: inline;">LEGEND</p>
</div>
<div style="position: absolute;top: 0;right: 0;">
<i>BUTTON</i>
</div>
</div>
I have 4 image div at the moment . And i want them to start aligning from the center . So that if anyone add more image div future it automatically align to the center.
Is it possible ?
use grid template provided by bootstrap and set the parent as container.
HTML
<div class="container">
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
</div>
As I understand this is what you want?
Full Layout
Yes, it is possible just you can try below code.
<div class ='container'>
<div class ='container-inner'>
<div class ='image'>
<img src=''>
</div>
<div class ='image'>
<img src=''>
</div>
<div class ='image'>
<img src=''>
</div>
</div>
</div>
<style>
.container{
width:100%:;
}
.container -inner{
display: table;
margin:auto;
}
.image{
float : left;
}
</style>
Above code helps you to put all image container to center.
If you add single image to it it take only that width which is image width and align center, if more images take width according as align center.
I have a question regarding centering row vertically!
I have here a simple html, with use of bootstrap 3:
<div class="container">
<div class="row">
<div class="col-sm-12 text-center" style="padding:5 20 5 20;">
Some text text text text text .....
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<img data-src="holder.js/460x308">
</div>
</div>
</div>
</div>
I would like to center this container or row ... doesn't matter.
So imagine i have a window which is 500px x 500px
I would like to pisition it in the middle of it, not on top (what is now the case) or bottom, but in center
PS: http://jsfiddle.net/e89TE/
try this css:
.container{
display:table;
}
.row{
display: table-cell;
vertical-align: middle;
}
should work. ps. post a fiddle next time
First thing you will need to do if you want the type on TOP of the image is make the image a background image:
<div class="col-sm-12 text-center">
<div class="foo">
Some text text text text text …..
</div>
</div>
The css
.foo {
background-image:url("holder.js/460x308");
}
This question already has answers here:
CSS: Vertical column layout without <table>
(3 answers)
Closed 9 years ago.
I have the below html code. What I need to do is split wuiInPageNav into two sections. LeftArea and wuiMainPageNav and they need to be side by side all the time. LeftAre div will hold my jstree nodes and wauiMainPageNave div will hold my charts and data etc. When I do the following, left goes left and wuiMainPageNav goes to the right. But when I resize the browser window, make it smaller, wuiMainPageNave goes down to the botttom. How do I make sure that LeftArea is always on the left and wuiMainPageName is always on the right, regardles of the browser window and size?missing here. Any ideas?
div id="wuiLeftArea">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title">Applicaion</h3>
<div id=tree></div>
</div>
</div>
<div id=wuiMainArea>
<div id=wuiMainContent>
<div id=wuiInpageNav>
<div id="top_chart" class="center"> </div>
</div>
</div>
</div>
css:
#wuiInpageNav {left:300px; float:right; width:1200px !important; overflow:hidden; }
div#wuiLeftArea{
float: left;
width: 16.25em;
background-color: #f2f4f5;
padding-top: .5833em;
position: relative;
}
UPDATE
Make sure you don't do your CSS inline:
http://jsfiddle.net/FE79R/1/
HTML
<div id=wuiMainArea>
<div id=wuiMainContent>
<div id=wuiInpageNav>
<div id="left">
<div id="tree">tree</div>
</div>
<div id=main>
<div id="top_charts" class="center"> </div>
<div class="main1">
<div id="top_chart1" class="center">top chart 1</div>
<div id="top_chart2" class="center">top chart 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#wuiInpageNav { width:300px; overflow:hidden; }
#left { width:100px; float:left; position:relative; background-color:#f2f4f5;}
#main { width:200px; float:left; background-color:orange;}