how can I get the input aligned with the div #submitKeyword ?
FIDDLE
HTML:
<div class="searchKeywords">
<input id="inputKeyword" type="text" name="keywords" placeholder="What are you looking for?">
<div id="submitKeyword"></div>
</div>
CSS:
.searchKeywords {
height: 100%;
width: 100%;
margin-top: 70px;
text-align: center;
}
.searchKeywords #inputKeyword {
display: inline-block;
height: 45px;
width: 150px;
border: 2px solid;
}
.searchKeywords #submitKeyword {
display: inline-block;
width: 115px;
height: 45px;
border: 1px solid #000;
background-image: url('/www/assets/newImages/gallery/Lupa.png');
background-repeat: no-repeat;
background-position: center;
}
Use vertical-align: middle;
.searchKeywords {
display: inline-block;
height: 100%;
width: 100%;
margin-top: 70px;
text-align: center;
vertical-align: middle;
}
.searchKeywords #inputKeyword {
height: 45px;
width: 150px;
border: 2px solid;
}
.searchKeywords #submitKeyword {
display: inline-block;
width: 115px;
height: 45px;
border: 1px solid #000;
background-image: url('/www/assets/newImages/gallery/Lupa.png');
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
}
Check this link http://jsfiddle.net/amoljawale/B45P5/1/
I suggest to go with display:table. Also use margin: auto instead of text-align:center to align your elements in the middle.
css
.searchKeywords {
height: 100%;
display: table;
margin: auto;
position: relative;
top: 70px;
}
.searchKeywords #inputKeyword {
display: table-cell;
height: 45px;
width: 150px;
border: 2px solid;
}
.searchKeywords #submitKeyword {
display: table-cell;
width: 115px;
height: 45px;
border: 1px solid #000;
background-image: url('/www/assets/newImages/gallery/Lupa.png');
background-repeat: no-repeat;
background-position: center;
}
fiddle
Related
I am trying to achieve this [enter image description here][1]
[1]: (https://i.stack.imgur.com/4ZOBB.jpg), i have managed to make it work on pc but its not looking same on mobile. Here code i have managed to create so far. box height should be less than of image. i have tried display:table but its also not working properly. please help. thank you.
body {
font-family: 'Abel', sans-serif;
}
.content-wrapper {
min-height: 100vh;
background-color: #d9dde2;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
background: #fff;
}
::-webkit-scrollbar-thumb {
background: #f89b0f;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #f89b0f;
}
a {
color: #f39c12;
}
.content-header>.breadcrumb {
background: #f89b0f;
right: 25px;
border-radius: 25px;
color: #fff;
padding: 10px;
}
.modal-dialog {
z-index: 1200;
}
.solid-header-default {
background: #f0f0f0;
}
.solid-header-success {
background: #00a65a;
}
h2 {
font-size: 18px;
}
.gcircle {
height: 50px;
width: 50px;
background-color: #938005;
border-radius: 50%;
display: inline-block;
}
.circle-block {
text-align: center;
vertical-align: middle;
}
.circle {
background: #938005;
border-radius: 50%;
color: black;
display: inline-block;
height: 50px;
font-weight: bold;
font-size: 1.2em;
width: 50px;
margin: 0 auto;
}
.circle span {
display: table-cell;
vertical-align: middle;
height: 50px;
width: 50px;
text-align: center;
padding: 0 15px;
}
.c-chart {
display: inline-block;
vertical-align: top;
padding: 5px;
}
.brandlogo-image {
float: left;
line-height: .8;
margin-left: .8rem;
margin-right: .5rem;
margin-top: -6px;
max-height: 34px;
width: auto;
}
.dashboard-box {
max-width: 400px;
min-width: 150px;
background-color: #C43805 !important;
border-radius: 15px;
margin-left: 60px;
min-height: 50px;
max-height: 80px;
display: flex;
align-items: center;
}
.dash-img {
vertical-align: middle;
}
.inner {
display: inline-block;
}
<div class="dashboard-box" >
<img src="http://phiz.live/portal/assets/theme/img/c1.png" alt="Phiz.Live" style="margin-left:-70px;width:35%;" class="dash-img">
</div>
You can use Flexbox. what ever you want to center, you it inside .center1 and .center2 div. For more information. https://www.w3schools.com/css/css_align.asp
.dashboard-box {
max-width: 400px;
min-width: 150px;
background-color: #C43805 !important;
border-radius: 15px;
margin-left: 60px;
min-height: 50px;
max-height: 80px;
display: flex;
align-items: center;
}
.dash-img {
vertical-align: middle;
}
.center1 {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 500px;
background: steelblue;
}
.center2 {
width: 100%;
}
<div class="center1" >
<div class="center2">
<div class="dashboard-box" >
<img src="http://phiz.live/portal/assets/theme/img/c1.png" alt="Phiz.Live" style="margin-left:-70px;width:35%;" class="dash-img">
</div>
</div>
</div>
Think I got it working the way you want here: JSfiddle link, but I changed margin-left to -30px for the image and margin-left: 30px;for the .dashboard-box. Perhaps it can help you.
HTML
<div class="wrapper">
<div class="dashboard-box" >
<img src="http://phiz.live/portal/assets/theme/img/c1.png" alt="Phiz.Live" style="margin-left:-30px;width:35%;" class="dash-img">
</div>
</div>
CSS
.wrapper {
height: 20vh;
display: flex;
align-items: center;
}
.dashboard-box {
max-width: 400px;
min-width: 150px;
background-color: #C43805 !important;
border-radius: 15px;
margin-left: 30px;
min-height: 50px;
max-height: 80px;
display: flex;
align-items: center;
}
I'd like to have a div, which contains:
Text on the top
Some image below it
How I may make it? Here's what I did so far
.container {
text-align: center;
display: inline-block;
width: 100%;
height: 180pt;
border: 1px solid red;
}
.text {
width: 12%;
height: 180px;
text-align: left;
background-color: yellow;
margin: 20px;
}
.text p {
font-size: 20px;
margin-left: 0 auto;
margin-right: 0 auto;
margin-top: 15px;
text-align: center;
}
.image {
width: 100%;
height: 100%;
display: inline-block;
background-image: url("url_to_img");
background-size: cover;
background-repeat: no-repeat;
}
<div class="container">
<div class="text">
<p>Lorem</p>
<div class="image"></div>
</div>
</div>
For now, the <p> is working just fine, but I have struggle with the image it's sticking out the borders of container div.
It's because you gave the test class too much margin. try not to mix up size units if possible.
add overflow:hidden; on .text class
.container {
text-align: center;
display: inline-block;
width: 100%;
height: 180pt;
border: 1px solid red;
}
.text {
width: 19%;
height: 180px;
text-align: left;
background-color: yellow;
margin: 10px;
overflow:hidden;
}
.text p {
font-size: 20px;
margin-left: 0 auto;
margin-right: 0 auto;
margin-top: 1px;
text-align: center;
}
.image {
width: 100%;
height: 100%;
display: inline-block;
background-image: url("https://avatars.mds.yandex.net/get-pdb/1380368/3e559dd1-32ad-4226-aac5-77ed3782a962/s1200");
background-size: cover;
background-position:center;
background-repeat: no-repeat;
}
<div class="container">
<div class="text">
<p>Lorem</p>
<div class="image"></div>
</div>
</div>
Here is a fiddle to get you started with, I didn't change much code because I didn't new your requirements Just did workaround around same code
https://jsfiddle.net/junaidmasoodi/vctwu2g5/11/
.text {
width: 100%;
height: 180px;
text-align: left;
background-color: yellow;
margin: 20px;
}
.text p {
font-size: 20px;
margin-left: 0 auto;
margin-right: 0 auto;
margin-top: 15px;
text-align: center;
}
.image {
width: 100%;
height: 100%;
display: block;
background-image: url("https://309w5s255371fs4df2vftgbl-wpengine.netdna-ssl.com/wp-content/uploads/2017/09/placeholder.jpg");
background-size: cover;
background-repeat: no-repeat;
}
for your .image block you could try background-size: contain; instead of cover
I have been using display: table for my html along with display: table-cell for my body lately, to make all of the contents of my page appear at the very center of the screen. While, this works with paragraphs, headings, inputs and labels etc.(as far as I have tested at least), it doesn't seem to work with div elements.
Is there any way to make this work for div elements like it does for the other ones? Pure CSS solution would be best.
Example (also on Codepen)
html {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
body {
display: table-cell;
vertical-align: middle;
}
.hidden {
display: none;
}
.leaf {
border-radius: 15px 2px 15px 2px;
border: 1px solid green;
background-color: green;
width: 250px;
height: 80px;
}
<div class="leaf">Why am I not centered?</div>
<p>And why am I centered?</p>
Just add margin: 0 auto;.. Working right.
html {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
body {
display: table-cell;
vertical-align: middle;
}
.hidden {
display: none;
}
.leaf {
border-radius: 15px 2px 15px 2px;
border: 1px solid green;
background-color: green;
width: 250px;
height: 80px;
margin:0 auto;
}
<div class="leaf">Why am I not centered?</div>
<p>And why am I centered?</p>
Just add margin: 0 auto; to .leaf class.
html {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
body {
display: table-cell;
vertical-align: middle;
}
.hidden {
display: none;
}
.leaf {
margin: 0 auto;
border-radius: 15px 2px 15px 2px;
border: 1px solid green;
background-color: green;
width: 250px;
height: 80px;
}
<div class="leaf">Why am I not centered?</div>
<p>And why am I centered?</p>
I have a page where I'm displaying the status of two websites -- as in if they're currently up and running, or not. If the site is up, I want the block to have a light green background, and if not, a light red one. And the site's name should be centered inside the block.
This is what I've tried so far:
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
#smallcontainer {
width: 208px;
height: 100px;
margin: 200px auto auto;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
}
<div id="container">
<div id="smallcontainer">
<div class="status"></div>
<div class="status"></div>
</div>
</div>
It works (see full screen output), but I feel like I'm way off. How do I do something simple as this using CSS, the correct way? I feel like my code is a hack. And how would you write the text exactly in the center of the block, vertically and horizontally?
And is it possible to have it such a way that it works across all desktop screen sizes? Maybe I should specify width and height in percentage as opposed to pixels?
You can use flexbox. support
HTML
<div id="container">
<div class="status"></div>
<div class="status"></div>
</div>
CSS
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
margin-left: 2px;
border: 1px solid #ccc;
}
http://jsfiddle.net/b9n3h1en/
Try this Fiddle, aligned text vertically and horizontally in center of the div.
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
#smallcontainer {
width: 208px;
height: 100px;
text-align: center;
margin: 200px auto auto;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
line-height: 100px;
}
Try this jsfiddle
body {
font-family: sans-serif;
}
#container {
width: 100%;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
position:relative;
}
#smallcontainer {
width: 208px;
height: 100px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: vertical;
box-pack: center;
box-align: center;
text-align:center;
}
Also see more about "display:flexbox"
https://developer.mozilla.org/en-US/docs/Web/CSS/display
Here's how I'd do it:
HTML:
<div id="container">
<div id="smallcontainer">
<div class="status">
<div class="border">
<div class="txt">Text Here</div>
</div>
</div>
<div class="status">
<div class="border">
<div class="txt">More Text Here</div>
</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
#container {
width: 95%;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
position: relative;
}
#smallcontainer {
width: 208px;
height: 100px;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.status {
height: 100%;
width: 50%;
float: left;
text-align: center;
padding: 2px;
}
.border {
background: #efefef;
border: 1px solid #ccc;
width: 100%;
height: 100%;
position: relative;
}
.txt {
position: relative;
top: 50%;
transform: translateY(-50%);
}
See the fiddle here: http://jsfiddle.net/bootsified/kf7Lbq24/
You can add negative margins to each of the divs you want to put exactly in the center. Note that for this the width and height should be in pixels.
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
border: 1px solid #ccc;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -300px;
}
#smallcontainer {
width: 208px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -104px;
margin-top: -50px;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
}
<div id="container">
<div id="smallcontainer">
<div class="status"></div>
<div class="status"></div>
</div>
</div>
I've task to create button with rounded corners that will stretch horizontally to container (now containers is only div's).
It should work in IE8 and higher.
Can you please advise is appropriate solution that I provide or there is better exist?
My solution:
.button-streched {
cursor: pointer;
width: 100%;
clear: both;
background-position: 0px 0px;
}
div.button-show-more div{
background-repeat: no-repeat;
height: 34px;
padding: 0;
}
.button-streched .left {
float: left;
background-image: url(/Images/buttton-left.png);
width: 6px;
height: 34px;
}
.button-streched .right {
float: right;
background-image: url(/Images/buttton-right.png);
width: 6px;
height: 34px;
}
.button-streched .middle {
background-image: url(/Images/buttton-middle.png);
background-repeat: repeat-x;
background-color: lightgreen;
margin: 0px 6px;
text-align: center;
}
.button-streched span{
vertical-align: middle;
line-height: 34px;
}
div.button-streched:hover .left,
div.button-streched:hover .middle,
div.button-streched:hover .right {
background-position: 0 100%;
cursor: pointer;
}
and HTML:
<div id="btnButton1" class="button-streched" style="">
<div class="left"></div>
<div style="width: 100%;">
<div class="right"></div>
<div class="middle">
<span>Do Some Action</span>
</div>
</div>
</div>
Shorten version, just to demonstrate that it works:
http://jsfiddle.net/xMKhZ/
You can make use of CSS3 PIE for rendering several of the most useful CSS3 decoration features.
Replace your CSS with this one.
.button-streched {
cursor: pointer;
width: 100%;
clear: both;
background-position: 0px 0px;
}
div.button-show-more div{
background-repeat: no-repeat;
height: 34px;
padding: 0;
}
.button-streched .left {
float: left;
background-image: url(/Images/buttton-left.png);
width: 6px;
height: 34px;
}
.button-streched .right {
float: right;
background-image: url(/Images/buttton-right.png);
width: 6px;
height: 34px;
}
.button-streched .middle {
background-image: url(/Images/buttton-middle.png);
background-repeat: repeat-x;
background-color: lightgreen;
margin: 0px 6px;
text-align: center;
border-radius:10px;
}
.button-streched span{
vertical-align: middle;
line-height: 34px;
}
div.button-streched:hover .left,
div.button-streched:hover .middle,
div.button-streched:hover .right {
background-position: 0 100%;
cursor: pointer;
}