I want center a inline-block element, with a text inside.
This is the HTML:
<div class="container body">
<h1 class="title">FAÇA SUA RESERVA</h1>
<p>Escolha o dia que deseja participar e aceite o nosso aplicativo.</p>
<hr>
<div class="row">
<div class="box thursday col-xs-6 col-sm-3">
<img src="assets/images/box.png">
</div>
<div class="box friday col-xs-6 col-sm-3">
<img src="assets/images/box.png">
</div>
<div class="box friday_2 col-xs-6 col-sm-3">
<img src="assets/images/box.png">
</div>
<div class="box saturday col-xs-6 col-sm-3">
<img src="assets/images/box.png">
</div>
<div class="col-9">
</div>
</div>
I need center just the title, and the subtitle "FAÇA SUA RESERVA", for this i'm using:
.container.body .subtitle,
.container.body .title {
text-align: center;
}
It's working ok, but if i make changes in the title element, the text-align: center it stops working..
This is the css for the title element:
.title {
display: inline-block;
border: 1px solid #F98835;
color: #f98835;
padding: 10px;
}
i already try setup margin: 0 auto;, and it doesn’t seem to have an effect
You need to add text-align: center to the parent of the inline-block element that you want to center.
.container.body {
text-align: center;
}
you can style your title like so :
.title {
width:330px;
border: 1px solid #F98835;
color: #f98835;
padding: 10px;
margin: 0 auto;
}
For your code to work you should be using the normal display: block behavior. This is the default value by the way. If you set the text-align: center to regular blocks it will center the text within. So you can individually center header/subtitle content and leave the rest normal.
.container.body .subtitle,
.container.body .title {
text-align: center ;
}
.title {
display: block;
border: 1px solid #F98835;
color: #f98835;
padding: 10px;
}
If you insist on still using an inline-block you can use the solution by Steve Saunders. But since text-align is an inherited trait you will have to "undo" this by setting text-align: left on the block-item children you do not want this to apply to.
as you make your h1 tag inline-block, it looses its block element properties partially, thus the width is limited to the content it has. That's why text-align: center does not work.
So, you can insert span inside the h1 tag or any block element with .title class and use that property.
.title span {
display: inline-block;
border: 1px solid #F98835;
color: #f98835;
padding: 10px;
}
Hope this helps what you are looking for.
Related
I have a simple flex box
<div className="details">
<div className="name">Name: {name}</div>
<span className="bullet"></span>
<div className="age">Age: {age}</div>
<span className="bullet"></span>
</div>
But when the name is really long it breaks weirdly.
Everything breaks instead of the age just wrapping underneath the name. How do I achieve this with css?
As of now my css is very bare:
.details {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
}
.name, .age {
color: #575757;
word-wrap: break-word;
}
.bullet {
background-color: #575757;
width: 2px;
height: 2px;
margin: auto 4px;
border-radius: 100%;
}
How can I make it so that when the name is long, the bullet and age move underneath it at the start of a new line and not this weird break?
Could it be because you have missed a quote?
<div className="details"> <!-- changed here -->
<div className="name">Name: {name}</div>
<span className="bullet"></span>
<div className="age">Age: {age}</div>
<span className="bullet"></span>
</div>
I am looking for a way to allow two rows within a single column while the other two columns to the right of it are equal/flexible to the height of those two rows. The width should be 100% when looking at all three columns (so around 33% each column). Here is an example of how I want it to look:
https://i.imgur.com/lLPzXhS.png
I will be filling those boxes with clickable boxes like shown below:
https://i.imgur.com/uyyDbL7.png
I have tried using display: row, display: cell, but I am not able to add any margins to it so this is the product I get:
https://i.imgur.com/Ok6EgT0.png
You can see that I have somewhat of the grid system set up, but not as ideally as I want it. There are no margins that can be set between the red and orange box, even though I am able to add margins to the turqoise and blue box.
Here is the code I have:
HTML:
<div class='d-table'>
<div class='t-row'>
<div class='t-cell one-third'>
<div class='turqoisebox'>
Turqoise box here
</div>
<div class='bluebox'>
Blue box here
</div>
</div>
<div class='t-cell one-third redbox'>
Red box here
</div>
<div class='t-cell one-third orangebox'>
Orange box here
</div>
</div>
</div>
CSS:
.d-table {
display: table;
}
.t-row {
display: table-row;
}
.t-cell {
display: table-cell;
margin-left: unset;
margin-right: unset;
/*border: 1px solid tomato;*/
}
.one-third {
width: 30%;
}
.two-thirds {
width: 200px;
}
.bluebox {
background-color: #9dd8dd;
margin: 25px;
border-radius: 25px;
border: solid #7dacb0;
border-width: 3px;
box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.4);
transition: 0.3s;
text-align: center;
}
.bluebox:hover {
box-shadow: 2px 8px 16px 2px rgba(0,0,0,0.8);
}
Any thoughts on how to replicate the second image results neatly?
You could use flexbox. Take a look at this simplified example:
.content {
background: orange;
margin: 1rem;
padding: 1rem;
flex: 1;
color: white;
display: flex;
}
.content > span {
margin: auto;
}
.row {
display: flex;
flex-direction: row;
background-color: blue;
flex: 1
}
.col {
display: flex;
flex-direction: column;
flex: 1;
background-color: red;
}
<div class="row">
<div class="col">
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
<div class="col">
<div class="content">
<span>This is centered</span>
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
</div>
<div class="col">
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
You could also use a minimal flexbox-based grid library like Flexbox Grid.
Margin is used for setting where elements should start so instead use padding between those 2 elements to get the space you want.
I'm trying to create a menu which I'm laying out using CSS grid. The problem that I'm having is figuring out how I can make the menu interactive when the mouse is hovering over each menu item.
I would like to be able to highlight the entire row when the mouse is over any of the menu items in the row. I can highlight each individual grid cell by adding a :hover css rule, but I don't know how to highlight the entire grid row.
The second part is then detecting when a row is being clicked. Again, I can add an onClick event handler to each cell but that doesn't seem ideal, as users could accidentally click in the gap between grid cells. I was thinking that if I can figure out how to highlight the entire row, then i could add the click handler to this row highlighter and that would solve the gap click problem.
I have created a codepen example that demonstrates how the menu is currently constructed: https://codepen.io/marekKnows_com/pen/RqMgGw
HTML:
<div class="myGrid">
<div class="anchor" id="item1">
<i class="image material-icons">folder_open</i>
</div>
<span class="text">Open...</span>
<span class="shortcut">Ctrl+O</span>
<div class="anchor" id="item2">
<i class="image material-icons">save</i>
</div>
<span class="text">Save...</span>
<span class="shortcut">Ctrl+S</span>
<div class="anchor" id="item3"></div>
<span class="text">Action</span>
<div class="separator"></div>
<div class="anchor" id="item4"></div>
<span class="text">Exit</span>
<span class="shortcut">Ctrl+X</span>
</div>
CSS:
.myGrid {
border: 1px solid black;
display: grid;
grid-template-columns: 20px auto auto;
grid-gap: 2px 6px;
align-items: center;
justify-items: start;
padding: 10px;
box-sizing: border-box;
}
.image {
width: 24px;
}
.text {
height: 28px;
line-height: 28px
}
.shortcut {
justify-self: end;
padding: 0 5px;
height: 28px;
line-height: 28px
}
.separator {
grid-column: 1 / span 3;
width: 100%;
height: 3px;
border-bottom: 1px solid lightgray;
}
One option is to wrap the row elements with a div, include style display: contents; in the wrapper div, add the click handler to the wrapper div.
CSS grid will treat the elements inside the wrapper as if there was no wrapper when laying out the contents, so they will be aligned as you desire. See MDN display-box for more info. That link also points out browsers have accessibility bugs with display: contents;.
I have tested only with Firefox so far.
<div class="myGrid">
<div class="row" onclick="console.log('click');">
<div class="anchor" id="item1">
<i class="image material-icons">folder_open</i>
</div>
<span class="text">Open...</span>
<span class="shortcut">Ctrl+O</span>
</div>
<div class="row" onclick="console.log('click');">
<div class="anchor" id="item2">
<i class="image material-icons">save</i>
</div>
<span class="text">Save...</span>
<span class="shortcut">Ctrl+S</span>
</div>
<div class="row" onclick="console.log('click');">
<div class="anchor" id="item3"></div>
<span class="text">Action</span>
</div>
<div class="separator"></div>
<div class="row" onclick="console.log('click');">
<div class="anchor" id="item4"></div>
<span class="text">Exit</span>
<span class="shortcut">Ctrl+X</span>
</div>
</div>
.myGrid {
border: 1px solid black;
display: grid;
grid-template-columns: 20px auto auto;
grid-gap: 2px 6px;
align-items: center;
justify-items: start;
padding: 10px;
box-sizing: border-box;
}
.row {
display: contents;
}
.image {
width: 24px;
}
.text {
height: 28px;
line-height: 28px
}
.shortcut {
justify-self: end;
padding: 0 5px;
height: 28px;
line-height: 28px
}
.separator {
grid-column: 1 / span 3;
width: 100%;
height: 3px;
border-bottom: 1px solid lightgray;
}
I finally got it to work. What I ended up doing was making the anchor element have position relative. Then I added a new div with position absolute under the anchor element. From within JavaScript I can size the new element to be the full width of the grid and using z-index I can position it relative to the other elements in the row accordingly.
Firstly, you might want to change your html so the .anchor elements are wrapping each item.
<div class="myGrid">
<div class="anchor" id="item1">
<i class="image material-icons">folder_open</i>
<span class="text">Open...</span>
<span class="shortcut">Ctrl+O</span>
</div>
<div class="anchor" id="item2">
<i class="image material-icons">save</i>
<span class="text">Save...</span>
<span class="shortcut">Ctrl+S</span>
</div>
<div class="anchor" id="item3">
<span class="text">Action</span>
</div>
<div class="separator"></div>
<div class="anchor" id="item4">
<span class="text">Exit</span>
<span class="shortcut">Ctrl+X</span>
</div>
</div>
And then use flex to align the contents of each item
.myGrid {
border: 1px solid black;
padding: 10px;
box-sizing: border-box;
}
.anchor {
display: flex;
justify-content: flex-start;
}
/* Hover for each anchor */
.anchor:hover {
background: red;
}
.image {
width: 24px;
}
.text {
height: 28px;
line-height: 28px
}
.shortcut {
margin-left: auto; /* push the shortcut to the right */
padding: 0 5px;
height: 28px;
line-height: 28px
}
.separator {
grid-column: 1 / span 3;
width: 100%;
height: 3px;
border-bottom: 1px solid lightgray;
}
https://codepen.io/anon/pen/xQWLaE
.anchor:hover >
.mygrid
{ background:red }
check this if it works on hovering item1 it will change the border color(from black to red as highlighting)
I have a dropdown bar with a bunch of options available to select. I want them to be inline but also want them to be scale-able so that they take up the entire width of the div (but also allowing multiple options per row). This is a photo of what I have so far:
Here is the html I have:
<h2>FILTERs</h2>
<span>Search:</span>
<input id="searchBox" type="text"></input>
<div id="conts" class="filter">
<div class="label">
<span>Option:</span>
</div>
<div class="content">
<div class="selector">Di1</div>
<div class="selector">Di 12</div>
<div class="selector">D 15</div>
<div class="selector">Div1</div>
<div class="selector">v1234</div>
<div class="selector">Di 3</div>
<div class="selector">D 12</div>
<div class="selector">v 1234</div>
<div class="selector">Di</div>
<div class="selector">D 123</div>
</div>
</div>
and the CSS:
.filter .content{
max-width: 96px;
max-height: 0px;
margin: 0px 12px 0px 4px;
background-color: #808080;
overflow: hidden;
}
#vertnav .filter:hover .content{
max-height: 256px;
}
.content .selector{
background-color: #369;
padding: 8px 4px;
display: inline-block;
text-align: center;
cursor: pointer;
box-sizing: border-box;
transition: .1s !important;
}
.content .selector:hover{
background-color: white;
color: #369;
}
The end goal is that each <div> on the same line will automatically fill the width of the row it is on, while not pushing the other <div>s onto a new line (aka, not using display: block; for example).
I am willing to use JS or jQuery but would prefer to use html and css only for this.
Thank you.
This is a typical situation for using flexbox:
Define the container as flex-container and give it these settings:
content {
display: flex;
flex-wrap: wrap;
}
(The first setting will do the equal distribution in lines, the second one will put the flex items (children elements) into several lines)
I have a div (Slideshow) and I want to wrap around it small divs (Items). The Slideshow div will be static and the Items will be rendered automatically using a Repeater Control.
I made this image to better illustrate what I need to achieve.
I saw this Question and I thought I could use the same logic, let the Repeater items get rendered normally and then change the markup using JavaScript and use some sort of a CSS Grid layout to style the first 4 items for example on the left and the right and the rest will be beneath them but I'm not sure how to do it plus if there's a more simple solution I thought it could be cleaner than using the concept I saw in the question I referred.
Update1: Changed the picture to show the exact desired output
You could generate a Masonary layout. This plug in may be helpful, https://github.com/desandro/masonry
You could do this with bootstrap columns as well. For the first row, with the slideshow, you have 3 columns. The outer left and right columns will have 2 nested rows. http://getbootstrap.com/examples/grid/. This is what Im most familiar with so I'll show you how I would implement a solution for the first row and how to implement a second row with 4 columns.
<div class="row">
<!-- Outer Left Column -->
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
</div>
<div class="col-xs-12">
Slide Show
</div>
<!-- Outer Right Column -->
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
</div>
</div>
<!-- Row With Four Items -->
<div class="row">
<div class="col-xs-3">
Item
</div>
<div class="col-xs-3">
Item
</div>
<div class="col-xs-3">
Item
</div>
<div class="col-xs-3">
Item
</div>
</div>
Checkout the angular material layout system as well. This will be harder to implement though because it requires Angular. https://material.angularjs.org/latest/#/layout/grid
Check this solution out and see if you can adopt it to your project: http://jsfiddle.net/1b0hoked/.
HTML:
<div id = "wrapper">
<div id = "slideshow"></div>
</div>
CSS:
*, :before, :after {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
#wrapper {
counter-reset: item-counter;
text-align: right;
margin: 0 auto;
display: table;
outline: 1px solid gray;
position: relative;
}
#slideshow {
width: 210px;
height: 210px;
line-height: 210px;
text-align: center;
border: 2px solid red;
position: absolute;
top: 5px;
left: 50%;
margin-left: -105px;
}
#slideshow:before {
content: "Slide Show";
vertical-align: middle;
font: bold 16px/1 Sans-Serif;
color: red;
}
.item {
height: 100px;
width: 100px;
text-align: center;
line-height: 96px;
border: 2px solid #aaa;
}
.item:before {
counter-increment: item-counter;
content: "item " counter(item-counter);
vertical-align: middle;
font: bold 12px/1 Sans-Serif;
color: #aaa;
}
.item {
float: left;
margin: 5px;
}
.item:nth-of-type(4n + 1) {
clear: left;
}
.item:nth-of-type(3) {
float: right;
margin-top: -105px;
}
.item:nth-of-type(4) {
float: right;
clear: right;
margin-left: -105px;
}
.item:nth-of-type(2) {
clear: left;
}
JS/jQuery:
$(function() {
var numToAdd = 50;
while(--numToAdd >= 0) {
$("</p>").addClass("item").appendTo("#wrapper");
}
});