I am trying to figure out how to center the second element in a div without knowing the width of the first one.
My aim is to have "foo" align to the left and "bar" centered within the original div. I have managed to achieve this by setting a static width for "foo":
<div>
<span style="float:left;">foo</span>
<span style="margin-left:-10px;">bar</span>
</div>
Is there an alternative method to accomplish this, without relying on a specific margin-left width?
How to align content in the middle of a parent container?
<div>
<span id="x">Lorem ipsum dolor sit amet</span>
<span id="y">consectetur adipiscing elit</span>
</div>
CSS:
#x{
float:right;
}
#y{
display:block;
margin: 0 auto;
width:200px;
}
I don't quite understand the reasoning behind your request, but here is the link you asked for: http://jsfiddle.net/Wexcode/jL87v/
<div>
<span class="foo">foo</span>
<span class="bar">bar</span>
</div>
CSS:
.foo { float: left; }
.bar {
text-align: center;
margin: 0 auto;
display: block; }
Here is an example of how you can structure your code:
CSS
.container{
text-align:center;
}
.child1, .child2{
text-align:left;
}
.child1{
float:left;
}
.child2{
vertical-align:top;
display:inline-block;
*display:inline;/* For IE7 */
*zoom:1;/* For IE7 */
border:1px solid red;
}
HTML
<div class="container">
<span class="child1">foo</span>
<span class="child2">bar</span>
</div>
To see this code in action, visit http://jsfiddle.net/6fMve/1/
To achieve the desired effect, adjust the margin-left value of the second element to 50%.
For reference, you can view an example implementation here: http://jsfiddle.net/8hRpb/
My HTML document contains the following code snippet: string htmlData = "<!DOCTYPE html><html><Head></Head><body><div><a target=\"_blank\" href=\"http://blender.palmbeachschools.org/GetFile ...
I have a container in my HTML page where I dynamically load other pages using the jQuery.load() function. One of the pages requires me to populate a table from the database just after/before it loads. How can I trigger a JavaScript function to execute righ ...
Is there a way to position a bootstrap header above the bootstrap navigation menu? I envision an initial 250px height header with the nav-brand placed above the nav menu, both centered. As the user scrolls, the header should shrink to match the default boo ...
Our team is currently developing an ember-pagination library to assist developers with pagination of items within an array collection. The library is already able to display content, enable pagination, and incorporate a typeahead feature for search funct ...
While working on creating a typewriter animation effect for my website using only CSS that I discovered through some online research, a question popped into my mind - is it possible to set different colors for each text in the animation? I have included t ...
Hey there! I've been attempting to incorporate some ASCII art onto a website that I don't have control over. When I input text into their editor, it is then enveloped in <p> tags which makes adding ASCII art quite challenging. Firstly, I ca ...
Is there an easier way to align text on both sides of a canvas element besides using CSS? The link below might provide some insight: https://github.com/nnnick/Chart.js/issues/114#issuecomment-18564527 I'm considering incorporating the text into the d ...
There is currently a scrollbar displaying over part of my page when necessary. https://i.stack.imgur.com/48Rbx.png I want to change the styling of the scrollbar to make it less bright and have a transparent background. I attempted to apply some styles, bu ...
I have a query regarding the implementation of Microdata on my webpage where tagged entities are not being displayed. For instance, I want to talk about two individuals in a paragraph without their names appearing on the webpage. Is there a method to only ...
I am currently working on creating a dynamic PHP navigation system that should highlight the active tab, but I'm facing challenges with making the active tab part function properly. While there are simpler methods available, they all involve incorpora ...
After integrating a script into my website template, it is not functioning as expected. I suspect there may be a conflict with JavaScript, but upon inspecting with firebug, I am unable to identify any abnormalities. Here is the link for reference: Link ...
I've been attempting to achieve this design using CSS without much success. The goal is for the entire logo to scale using fittext.js while looking visually appealing. However, I keep encountering obstacles that prevent me from achieving my desired re ...
Is there a way to highlight the boundary of a table row when hovering over it? Something like this: https://i.sstatic.net/PbQSR.png I attempted to use CSS with the following code: .ant-table-tbody>tr.ant-table-row:hover>td, .ant-table-tbody>tr&g ...
Check out this code snippet: http://jsfiddle.net/YNKws/ <div id="div1" style="padding: 2px; overflow: auto;"> <div style="height:30px;">lalala</div> <div style="height:30px;">lalala</div> </div> var d = $("#div1"); ...
How can I display mathematical formulas in a text input and store them in a database? I need to be able to display formulas like the ones shown in the image at this link: Currently, when I copy any formula into the text box, it gets converted to normal t ...
I'm currently utilizing the "Custom HTML Tag" option in GTM with my code below, but encountering an error when attempting to publish: Invalid HTML, CSS, or JavaScript found in template. It seems that GTM may not support or recognize certain tag attri ...
Utilizing bootstrap and crispy forms for styling my website has been successful, except for a border issue with the username fields. While all other fields are displayed correctly, the username fields appear without a border as shown in the image below: h ...
Here is a visual representation of the issue I am facing: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> <table border="1"> <colgroup> <col ...
Here is my JavaScript code that I'm currently using: $(document).ready(function() { $(".button-list .next").click(function() { project = $(this).parents().filter(".projektweb").eq(0); currentimg = project.find(".im ...
My goal is to design a form that includes date and time input fields. The placeholder text should move up by X pixels when the user clicks on the field. While the form appears fine in Chrome, there seems to be an issue with overlapping form fields in Safa ...