Technique for Centering a Div with Variable Widths
For situations where the widths of div elements vary, a useful centering technique involves utilizing both an outer and inner wrapper.
The outer wrapper div is configured with text-align:center.
The inner wrapper is set to inline-block, allowing it to align centrally within the outer wrapper. It then adjusts this alignment by specifying text-align:left to override the centering effect from the first wrapper.
By floating the logo and menu elements next to each other, they can be positioned side by side.
This method proves effective when dealing with variable-width elements that need to be centered on a page.
In a practical example, the navigation bar could wrap below the logo on smaller screens, offering improved usability in such scenarios.
Explore a sample implementation on JSFiddle through this link: JSFiddle Example
#allHead {
text-align:center;
}
.center-inner {
text-align:left;
display:inline-block;
}
#logo {
width : 100px;
height : 80px;
background-color: green;
float:left;
}
#navigation {
max-width: 600px;
background-color: orange;
float:left;
}
To maintain the unity of the logo and navigation elements using CSS table displays, a designated layout approach comprising table and table row divisions ensures consistent rendering across different browsers.
Visit the following JSFiddle link for further insights: JSFiddle
#allHead {
text-align:center;
}
.center-inner {
text-align:left;
display:inline-block;
}
.nav-bar-table {
display:table;
}
.nav-bar-table-row {
display:table-row;
}
#logo {
width : 100px;
height : 80px;
background-color: green;
display:table-cell;
}
#navigation {
max-width: 600px;
background-color: orange;
display:table-cell;
padding:.5em;
}
Lastly, here's another experimental variation employing absolute positioning to achieve central alignment. While the top examples offer more reliable outcomes, you can still test this method on JSFiddle: JSFiddle