I currently have parallelogram that was created with a div and the css property clip-path. This shape is stake to the stop and bottom of the screen with a dynamic width as well. I'm trying to figure out how to horizontally (not vertically) center the content.
My issue is that any text that I try to center seems to center to the rectangle, not the parallelogram that I have created.
So far I've tried to use left and right padding, percentage based margins, and clip paths of the content within the div to no avail.
I've attached a codepen with where I'm at so far. Any help would be greatly appreciated.
You need to add
text-algin-center;
to your
.sidebar-callout-padding and
display:inline-block;
to your paragraphs (give them an unique ID)
#wrapper {
background-color: yellow;
text-align: center;
}
#yourdiv {
background-color: green;
display: inline-block;
}
<div id="wrapper">
<div id="yourdiv">Your text</div>
</div>
Related
I'm working on a small tic tac toe game and i have a problem aligning vertically the content of my TDs. As you can see in the following screenshot i apply the vertical-align property to the selected TD but the text is still not centered vertically and remains slightly below the center of the square.
How can i align the content of the TDs properly?
I uploaded the source files in this folder in case they are needed.
Thanks in advance
I attach the relevant code as suggested by the user Maik Lowrey.
HTML
<div class="row"><div class="column d-flex justify-content-center">
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</div></div>
JS
let cells = document.querySelectorAll("td");
cells[selected_cell].innerText=event.key;
This is what i get now, the structure of the grid has changed but the letter is still not aligned vertically:
To center any element inside the container, add below css to the container
.container{
display: flex;
justify-content: center;
align-items: center;
}
Simply you can use verticle-align:middle to table.. it can solve your problem
A way for centering elements is to use text-align: center for aligned horizontally. Also set line-height equal with height of the element for aligned vertically.
Example:
.container {
height: 85px;
width: 85px;
line-height: 85px;
background-color: black;
color: white;
text-align: center;
}
<div class="container">1
</div>
See: https://www.sitepoint.com/atoz-css-quick-tip-vertical/
I am trying to get my text element to be vertically centered in a larger div, which is colored in blue. I specifically defined the height and alignment as follows:
vertical-align: top; //middle actually puts it even lower
height: 83px; //the same as the larger area
However, I cannot get this to be vertically aligned in the center of the blue box. Any help would be appreciated!
You can do this in several ways:
center the division:
div.div{
text-align: center;
}
<div class="div">
Hello world!
</div>
Use a p tag to align the text to the center
div.div{
background-color: #00ff00
}
p.p{
text-align: center;
}
<div class="div">
<p class="p">Hello World!</p>
</div>
You can set the blue div position to relative then add the following to your test class :
.test{
position:absolute;
top:calc(50% - 38px); //76/2 = 38 to get the center of your span.
}
jsfiddle
I found my answer. I needed to simply add a text-bottom vertical alignment to the image that was a part of the light blue div. Thanks for the answers anyways guys!
I want to make the button always aligns vertically on the middle of the image responsively. I can make the image responsive using .img-responsive, however I can't make the arrow to be always on the middle of the image. I suspect the issue is because I can't make the height of the arrow's div to be equal the height of the image. Any way to do so?
Here is my jsFiddle..
PS: for those who can come up with better words please change the title.. ^^
CSS only solution. Using the display table and table-cell combo, you can achieve what you are looking for. I had never really tried it before, as far as I know, but searched around a bit and found a solution which gave me a good starting point to achieve what I needed.
The trick is to have a container which will possess the display table property. Inside that wrapper, you will have all your other elements, which will possess the table-cell property, in order to have them behave properly and stack themselves next to each other, as table-cell would to do.
By giving your table-cells a 100% height, they will adapt themselves to the height of the wrapper, giving you the chance to use the handy little table property going by the name: vertical align. Use the middle vertical align property to center perfectly your nav buttons.
Give your image the max-width 100% property for proper responsive behavior. But don't use bootstrap's own image responsive class because it contains css properties we don't want and that messes up our layout.
I reworked the html a bit, so that each element align perfectly, in the correct order.
WORKING EXAMPLE JSFIDDLE
HTML:
<div class="row">
<div class="col-xs-12">
<div class="image-container">
<div class="prev-btn nav-btn"> < </div>
<div class="inner-container">
<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" class="center-block">
</div>
<div class="next-btn nav-btn"> > </div>
</div>
</div>
</div>
CSS:
.image-container{
display:table;
height: 100%;
text-align:center;
}
.inner-container{
display:table-cell;
width: 100%;
height: 100%;
padding: 0 15px;
vertical-align: middle;
text-align: center;
}
.inner-container img{
width: 100%;
height: auto;
max-width: 100%;
}
.nav-btn{
font-size:50px;
font-weight:700;
font-family: monospace;
color: #000;
cursor:pointer;
}
.nav-btn:hover{
color: #B6B6B6;
}
.prev-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.next-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
Here's a simple solution in Javascript/Jquery. The trick is to adjust the position of each NAV buttons according to the height of the image each time the browser id resized. Dividing the image height by 2 will get you the center of the image, aka the position where you will want your buttons to be. Using only this value will no be enough, you also need to get the center value of your nav buttons. Substracting each values will give you the real position value for your buttons. The ScreenResize function will then update the position each time the image is scaled responsively.
$(function(){
//Call On Resize event on load
screenResize();
//Bind On Resize event to window
window.onresize = screenResize;
});
function screenResize() {
//Adjust Nav buttons position according to image height
$('.nav_btn').css({
'top': (($('.center-block').height() / 2)-($('.nav_btn').height() / 2))
});
}
Also, change the line-height of your buttons to this, it will help:
.nav_btn p{
line-height: 1.25;
}
Finally, use Media-Queries to change buttons font-size and line-height if necessary. Also, like user Valentin said, using images for the nav buttons could also be easier, you wouldn't have to use media-queries.
Example JSFIDDLE
I am implementing a carousel with images. The carousel is 960px wide, and contains 5 images in containers of width 960px/5 = 192px (and height 119px).
I want the images to be as large as possible inside their containers, without changing the aspect ratio of the images. I also want the images to be centered both horizontally and vertically within their container.
By hacking around for hours, and using the center tag, I have managed to construct what I describe above. Please see a fiddle here.
The problem is with the container of the second image (as shown by the black border). While the second image is centered horizontally, the container is shifted down a little.
I'm trying to implement an overlay on the images, and need the containers to all be at the same height. How can I have the containers all at the same height? Is there a better/cleaner approach that does not use the center tag?
You could add vertical-align:top; to your #carousel-images .image{} css
Or middle or bottom...
Uh? Why did I get downvoted on this?
http://jsfiddle.net/y2KV7/
I got it to work by doing the following:
HTML:
<div id="wrapper">
<div id="carousel-images">
<img src="http://eurosensus.org/img/initiatives-300/30kmh.png" />
<img src="http://eurosensus.org/img/initiatives-300/affordableEnergy.png"/>
<img src="http://eurosensus.org/img/initiatives-300/basicIncome.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/ecocide.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/educationTrust.jpg"/>
</div>
</div>
CSS:
#wrapper
{
width: 100%;
text-align: center;
background: blue;
}
#carousel-images
{
width: 960px;
white-space: nowrap;
font-size: 0;
margin: 0 auto;
}
#carousel-images img
{
display: inline;
max-width: 192px;
max-height: 119px;
border: 1px solid black;
vertical-align: middle;
}
Click here to view working jsFiddle demo
First, don't make the world come back to 10 years ago. do not use tag for formating. I would also suggest you to get some reading about different between div and span as well as display attribute. you could easily find information on http://www.w3schools.com.
if you want a center container. you could use css margin auto trick.
like margin:5px auto; would center the container horizontally.
I have two divs, inline. One displays a measurement, the other displays a unit value. The text in each is currently aligned correctly.
I would like to display a bar stretching across the top of the measurement value, but no further. Note: for various reasons, I can't use text-decoration: overline. Instead I am trying to display a background image behind the text, clipping to the width of the text (not the div).
I have tried using display:table; on the measurement div, and this works, but it has the affect of screwing up my div layout (the text is not aligned between the divs).
Here's some example html:
<div class="measurement">1234</div><div class="unit">mm</div>
Here's some example css:
.unit {
display:inline-block;
}
.measurement {
display:inline-block;
background-image:url(overline.png)
width:200px;
text-align: right;
}
Does anyone know of a way I can clip the background image to the width of the displayed text?
Just use a border instead of an image:
.measurement {
display:inline-block;
border-top:1px solid #000000
}
How about changing the divs to spans and wrapping the measurement span in a div to space it to the desired width?
HTML:
<div class="spacer"><span class="measurement">1234</span></div><span>mm</span>
CSS:
.spacer{
width:200px;
display: inline-block;
text-align: right;
}
.measurement {
background-image:url(overline.png);
}
See this jsFiddle for a working example.
(background-color should work the same as an image).